This explains how you can embed YouTube videos using the Google+ approach - only the video thumbnail is loaded along with the page and the actual player loads when the user hits the play button.
<!-- You can embed multiple Youtube videos on a page -->
<div class="youtube" id="LcIytqkbdlo" style="width:560px; height: 315px;"></div>
<div class="youtube" id="_Jmisv1Spck" style="width:560px; height: 315px;"></div>
<!-- Include the JavaScript only once -->
<script>
// Find all the YouTube video embedded on a page
var videos = document.getElementsByClassName('youtube');
for (var i = 0; i < videos.length; i++) {
var youtube = videos[i];
// Based on the YouTube ID, we can easily find the thumbnail image
var img = document.createElement('img');
img.setAttribute('src', 'http://i.ytimg.com/vi/' + youtube.id + '/hqdefault.jpg');
img.setAttribute('class', 'thumb');
// Overlay the Play icon to make it look like a video player
var circle = document.createElement('div');
circle.setAttribute('class', 'circle');
youtube.appendChild(img);
youtube.appendChild(circle);
// Attach an onclick event to the YouTube Thumbnail
youtube.onclick = function () {
// Create an iFrame with autoplay set to true
var iframe = document.createElement('iframe');
iframe.setAttribute(
'src',
'https://www.youtube.com/embed/' + this.id + '?autoplay=1&autohide=1&border=0&wmode=opaque&enablejsapi=1'
);
// The height and width of the iFrame should be the same as parent
iframe.style.width = this.style.width;
iframe.style.height = this.style.height;
// Replace the YouTube thumbnail with YouTube HTML5 Player
this.parentNode.replaceChild(iframe, this);
};
}
</script>