Embedding YouTube Video with High Quality Thumbnail

In the above example, the original code for embedding provided by YouTube is like this.

<iframe width="1280" height="720" src="https://www.youtube.com/embed/nfQHF87vY0s" frameborder="0" allowfullscreen></iframe>

We now change it to this.

<iframe width="1280" height="720" src="https://www.youtube.com/embed/nfQHF87vY0s?autoplay=1" frameborder="0" allowfullscreen></iframe>

$thumbnail.on('click', function(e){
e.preventDefault();
src = src+'&autoplay=1'; // src: the original URL for embedding
$videoContainer.empty().append( $iframe.clone().attr({'src': src}) ); // $iframe: the original iframe for embedding
}
);

 

To see the demo, please go to the portfolio section of the Jordan template and click the third thumbnail.

 

View jQuery plugin  | code