Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<!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