Youtube Helper :: Helper function constructs a placeholder with a video still image from youtube. On click the placeholder is replaced by the youtube iframe. #php

youtube_placeholder.js

$('.js-loadvideo').on('click', function(e){
  e.preventDefault();
  var $vid_id = $(this).attr('href').split('v=')[1];
  var width = $(this).attr('data-width');
  var height = $(this).attr('data-height');
  var $video = '<iframe width="'+width+'" height="'+height+'" src="//www.youtube-nocookie.com/embed/'+ $vid_id +'?rel=0&showinfo=0&wmode=opaque&autoplay=1&modestbranding=1" frameborder="0" allowfullscreen></iframe>';
  $(this).parent('.playoverlay').html($video);
  return false;
});

youtube_placeholder.less

.youtube_placeholder { position: relative; max-width: 100%; height: 100%; overflow: hidden; background-color: #000; display: inline-block; 
    iframe { max-width: 100%; }
	a { background-position: center center; background-size: 105%; background-repeat: no-repeat; border: 1px solid fade(#000, 5%); 
		&, &:before { position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; }
		&:before { background: url('../images/play_icon.png') center center no-repeat; content: '';  }
	}
}

youtube_placeholder.php

<?php

function youtube_placeholder($id, $w = 450, $h = '')
{
    // 0.562222222 is equivalent to 16:9 ratio
	if (empty($h)) $h = round($w*0.562222222);
	$video = '<div class="youtube_placeholder" style="width:'.$w.'px;height:'.$h.'px;" >';
	$video .= '<a href="http://www.youtube.com/watch?v='.$id.'" target="_blank" data-width="'.$w.'" data-height="'.$h.'" class="js-loadvideo" style="background-image:url(http://img.youtube.com/vi/'.$id.'/hqdefault.jpg); "></a>';
	$video .= '</div>';
	return $video;
}