YouTube Full Screen Player Page from Playlist

The request was that we do something interesting with the random screens we have scattered around our area. It seemed like it’d be easy to make a little full-page player for a YouTube playlist with some lightweight overlays to emphasize the connection with our department. Handling the videos displayed via a playlist makes it easy to add/remove content and the making the logo overlays part of the webpage let us keep things consistent across videos we didn’t control. Since we weren’t activating sound by default turning on captions by default was also a key need.

The codepen example is here.

The HTML is dead simple. We’ve got a wrapper div which lets us make it full screen, an ytplayer div for the videos, and two divs to do the logos.

 <div class="videoWrapper">
        	<div id="ytplayer"></div>
        	<div class="altlab-tv"></div>
        	<div class="ctle-tv">CTLE<div class="ctle-sub">Center for Teaching & Learning Excellence</div></div>
</div>

The javascript is pretty much a cut/paste from the YouTube API docs. There are a few changes to reference the playlist instead of a single video and some stuff around closed captions and that’s noted below.

 // Load the IFrame Player API code asynchronously.
			  var tag = document.createElement('script');
			  tag.src = "https://www.youtube.com/player_api";
			  var firstScriptTag = document.getElementsByTagName('script')[0];
			  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

			  var player;
			  function onYouTubePlayerAPIReady() {
			    player = new YT.Player('ytplayer', {
			      height: 'auto',
			      width: '100%',	
			          	   			
			      playerVars:{
			      	enablejsapi: 1,
              listType:'playlist',
			      	list: 'PLDr_4M2flXJlRLzruodOncrsz33omi3zp', //put playlist ID HERE <-----------------
			      	autoplay: 1,
			        controls: 0,
			        loop: 1,
			        cc_load_policy: 1,	//this works on explicitly set CC not auto-generated (I think) . . . 
			        cc_lang_pref: 'en',
			        iv_load_policy: 3,			     
			      }
			      
			    });			    
			  }

The main tweak here is to get the fullscreen video to behave. I use this pattern from CSS tricks. The other stuff just staples some divs over the lower corners to show the logos.

body {
  font-family: helvetica, sans-serif;
}
.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%;
		}	

		.altlab-tv {
			background-image: url(http://rampages.us/extras/tv/imgs/logo.png);
			background-position: center;
			background-size: contain;
			background-repeat: no-repeat;
			width: 200px;
			height: 200px;
			position: absolute;
			z-index: 1000;
			display: block;
			bottom: 0;
			left: 0;
			margin: 30px;
			background-color: #f8b800;
		}

		.ctle-tv {
			font-size: 4rem;
			width: 160px;
			height: 170px;
			position: absolute;
			z-index: 1000;
			display: block;
			bottom: 0;
			right: 0;
			margin: 30px;
			background-color: #fff;
			padding: 20px;
			text-align: center;
			color: #000;
			background-color: #f8b800;
			font-weight: 600;
		}

		.ctle-sub {
			font-size: 1rem;
		}

Comments on this post

  1. Keegan said on November 14, 2017 at 3:14 pm

    Thanks for this post Tom. The codeine link is especially valuable to see it in action.

    Keep on rocking Sir! 🙂

    • Keegan said on November 14, 2017 at 3:14 pm

      Bah, codepen!

      Silly autocorrecting…

Leave a Reply

Trackbacks and Pingbacks on this post

No trackbacks.

TrackBack URL