Skip to content

Instantly share code, notes, and snippets.

@DevShahidul

DevShahidul/youtube video auto play api.html

Last active September 27, 2019 19:01
Show Gist options
  • Save DevShahidul/17f2f69eba31756e4fd4ed843c913137 to your computer and use it in GitHub Desktop.
Save DevShahidul/17f2f69eba31756e4fd4ed843c913137 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
youtube video auto play api.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<title>Youtube video</title>
<style>
.home-banner.loading .video-background {
opacity: 0; }
.video-background {
position: absolute;
top: 50%;
left: 0;
padding-top: 56.25%;
width: 100%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-transition: 2s opacity ease;
transition: 2s opacity ease;
opacity: 1; }
.video-foreground,
.video-background iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none; }
</style>
</head>
<body>
<div id="video-banner-box" class="home-banner loading">
<div class="image video-slide" style="background-image: url(<?php echo $heroImage[0]; ?>)">
<div class="video-background">
<div class="video-foreground" id="YouTubeBackgroundVideoPlayer">
</div>
</div>
</div>
</div>
<script async src="https://www.youtube.com/iframe_api"></script>
<script type="text/javascript">
(function($){
$(function(){
onYouTubeIframeAPIReady();
}); //End ready function
function onYouTubeIframeAPIReady() {
var player;
player = new YT.Player('YouTubeBackgroundVideoPlayer', {
videoId: '<?php echo the_field('how_we_work_hero_section_video'); ?>', // YouTube Video ID
width: 1280, // Player width (in px)
height: 720, // Player height (in px)
playerVars: {
playlist: '<?php echo the_field('how_we_work_hero_section_video'); ?>',
autoplay: 1, // Auto-play the video on load
autohide: 1,
disablekb: 1,
controls: 0, // Hide pause/play buttons in player
showinfo: 0, // Hide the video title
modestbranding: 1, // Hide the Youtube Logo
loop: 1, // Run the video in a loop
fs: 0, // Hide the full screen button
autohide: 0, // Hide video controls when playing
rel: 0,
enablejsapi: 1
},
events: {
onReady: function(e) {
e.target.mute();
e.target.setPlaybackQuality('hd1080');
},
onStateChange: function(e) {
if(e && e.data === 1){
var videoHolder = document.getElementById('video-banner-box');
if(videoHolder && videoHolder.id){
videoHolder.classList.remove('loading');
}
}else if(e && e.data === 0){
e.target.playVideo()
}
}
}
});
}
})(jQuery);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment