So, I got sucked into a debugging vortex today and wasted HOURS!
I am trying to code a video background/banner that uses YouTube videos.
I had the base code, and it was working great … until I tested it on IE.
I had to start over. Internet Explorer didn’t even load the video properly from my first attempt. It worked great on all other browsers, and the code came from a snippet.
Log story short, I finally have it close on all browsers, with a few issues.
First, I am muting the video, and that works fine on all browsers except IE.
Second, I’d like to be able to choose where to start and stop the video. I can’t get this to work anywhere.
Any help would be appreciated at this point. All of the code is below. All you have to do is copy it and paste it into a test html doc on your computer.
Thanks!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* { box-sizing: border-box; }
.video-background {
background: #000;
position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
z-index: -99;
}
.video-foreground,
.video-background iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.cover {
position: absolute;
top: 0;
left: 0;
z-index: 2;
width: 100%;
height: 100%;
background: #51b848;
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
/* IE 5-7 */
filter: alpha(opacity=75);
/* Netscape */
-moz-opacity: 0.75;
/* Safari 1.x */
-khtml-opacity: 0.75;
/* Good browsers */
opacity: 0.75;
}
@media (min-aspect-ratio: 16/9) {
.video-foreground { height: 300%; top: -100%; }
}
@media (max-aspect-ratio: 16/9) {
.video-foreground { width: 300%; left: -100%; }
}
@media all and (max-width: 600px) {
.vid-info { width: 50%; padding: .5rem; }
.vid-info h1 { margin-bottom: .2rem; }
}
@media all and (max-width: 500px) {
.vid-info .acronym { display: none; }
}
</style>
</head>
<body>
<div class="cover"></div>
<div class="video-background">
<div class="video-foreground">
<div id="ytplayer"></div>
</div>
</div>
<script async src="https://www.youtube.com/iframe_api"></script>
<script>
function onYouTubeIframeAPIReady() {
var player;
player = new YT.Player('ytplayer', {
videoId: 'D3jyV5eYODI', // YouTube Video ID
width: 560, // Player width (in px)
height: 316, // Player height (in px)
playerVars: {
autoplay: 1, // Auto-play the video on load
controls: 0, // Show 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
cc_load_policy: 0, // Hide closed captions
iv_load_policy: 3, // Hide the Video Annotations
rel: 0,
playlist: 'D3jyV5eYODI'
},
events: {
'onReady': onPlayerReady
}
});
}
function onPlayerReady(event) {
event.target.mute();
event.target.setVolume(0);
}
// Written by @labnol
</script>
</body>
</html>