Skip to content

Instantly share code, notes, and snippets.

@deepakshrma
Created December 27, 2015 07:43
Show Gist options
  • Save deepakshrma/17fbb07f220b3d6c127d to your computer and use it in GitHub Desktop.
Save deepakshrma/17fbb07f220b3d6c127d to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Basic Vanilla JavaScript Youtube Player- With playlist</title>
</head>
<body>
<div class="player" style="width: 480px;height:360px;max-width: 50%;margin: 0 auto;">
<div id="youtube" style="width: 100%;height: 100%"></div>
<div class="controls" style="text-align: center;margin: 0 auto;">
<button style="padding: 10px;width: 100px;background-color: #167AC6;"
onclick="YouTubePlayer.playPrevious()">Prev
</button>
<button style="padding: 10px;width: 100px;background-color: #167AC6;margin-left: 30%;"
onclick="YouTubePlayer.playNext()">Next
</button>
</div>
</div>
<script src="//www.youtube.com/iframe_api"></script>
<script>
var YouTubePlayer = {
current: 0,
player: null,
/**
* Tracks ids here...
*/
videos: [
'vQMnaDNw5FQ',
'Dp6lbdoprZ0',
'OulN7vTDq1I'
],
currentlyPlaying:function(){
console.info('Current Track id', YouTubePlayer.videos[YouTubePlayer.current]);
return YouTubePlayer.videos[YouTubePlayer.current];
},
playNext: function () {
YouTubePlayer.increaseTrack()
if (YouTubePlayer.player) {
YouTubePlayer.currentlyPlaying();
YouTubePlayer.player.loadVideoById(YouTubePlayer.videos[YouTubePlayer.current]);
} else {
alert('Please Wait! Player is loading');
}
},
playPrevious: function () {
YouTubePlayer.decreaseTrack()
if (YouTubePlayer.player) {
YouTubePlayer.currentlyPlaying();
YouTubePlayer.player.loadVideoById(YouTubePlayer.videos[YouTubePlayer.current]);
} else {
alert('Please Wait! Player is loading');
}
},
increaseTrack: function () {
YouTubePlayer.current = YouTubePlayer.current + 1;
if (YouTubePlayer.current >= YouTubePlayer.videos.length) {
YouTubePlayer.current = 0;
}
},
decreaseTrack: function () {
YouTubePlayer.current = Math.max(YouTubePlayer.current - 1, 0);
},
onReady: function (event) {
event.target.loadVideoById(YouTubePlayer.videos[YouTubePlayer.current]);
},
onStateChange: function (event) {
if (event.data == YT.PlayerState.ENDED) {
YouTubePlayer.playNext();
}
}
}
function onYouTubeIframeAPIReady() {
YouTubePlayer.player = new YT.Player('youtube', {
height: '350',
width: '425',
events: {
'onReady': YouTubePlayer.onReady,
'onStateChange': YouTubePlayer.onStateChange
}
});
}
</script>
</body>
</html>
@amyreza
Copy link

amyreza commented Feb 12, 2024

Hello . for this script, How do I add parameters so that the video plays automatically and forces it to play with the highest resolution quality as in this example and I want to combine this code

<iframe width="1920" height="1080"src="https://www.youtube.com/embed/bj4nTqDoOTA?&autoplay=1&rel=0&modestbranding=1&vq=hd1080"frameborder="0" allowfullscreen></iframe>

Where should I put this parameter?
so that all videos are forced to play at the highest resolution

?&autoplay=1&rel=0&modestbranding=1&vq=hd1080

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment