Programmed YouTube Video viewer
Youtube takes a lot of the effort out of hosting and displaying videos. If you are happy for Google to have access to the information about who is watching your videos, then it makes sense to use them to host them.One problem is making it easy to control how the videos are displayed and allow the viewer to select what they want to watch.
Server Side
For later.Client Side
It is a matter of Style
Getting the video to display properly, especially if you are using a responsive style web site is a bit more complicated than Google makes out, as the default height is about 150 pixels, which is a bit embarrassing.The solution from CSS-Tricks based on work by Thierry Koblentz sets the height as a percentage of the width. When the page resizes, the height is recalculated. Any IFRAME inside it is scaled to 100% to fill the container.
.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
The next bit is getting the play button to hover over the images.
.container {
position: relative;
width: 100%;
max-width: 400px;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0.25;
transition: .3s ease;
}
.container:hover .overlay {
background-color: red;
opacity: 0.8;
}
.icon {
color: white;
font-size: 100px;
position: absolute;
top: 30%;
left: 40%;
width:25%;
height:auto;
text-align: center;
}
The Buttons
The buttons are contained in two nested div objects.The first (of class 'container') holds the YouTube thumbnail image.
The second (of class 'overlay') holds the play button image and has the onclick event handler described below.
<div class="container">
<img src=http://i1.ytimg.com/vi/xxxxxxxxxxx/mqdefault.jpg
alt="Title" class="image" width='100%' />
<div class="overlay">
<img class="icon" src="play.png" onclick='setPlayList(1)'/ >
</div>
</div>
The overlay has a normal opacity of 0.25, so the button image displays faintly. When the mouse hovers over the image, the background changes to red and the opacity increases to 0.8.
Video Selection
The video choice requires an array containing the video to play plus a rotating set of the other videos. That is a coding exercise for server side and another time.<script>
playlists =['xxxxxx?playlist=yyyyy,zzzzz', 'yyyyy?playlist=zzzzz,xxxxx'];
</script>
Each play button has an onclick event that calls the setPlayList function with a number which selects the element from the array described above.
<script>
function setPlayList(aPlaylist){
youtubePlayer = document.getElementById("youtube_video");
youtubePlayer.src="https://www.youtube.com/embed/"+playlists[aPlaylist] + "&rel=0&autoplay=1";
}
</script>
The autoplay parameter starts the video playing, the rel = 0 prevents videos from other channels from being displayed,
References
https://support.google.com/youtube/answer/171780?hl=enhttps://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php
https://alistapart.com/article/creating-intrinsic-ratios-for-video/
