How to play iFrame embedded YouTube video on click of a button.


In a recent my project I had to show and autoplay an embedded YouTube video on click of a button.

So if you just need to play the video on click and don’t need to know when it’s ended or do other things with it, that the YouTube API allows you to do, this is the solution you are looking for:

First we need a iframe Embed Code and simple link.

<a id="playVideo" href="#">Play Youtube Video</a>

< iframe id="youtubeVideo" width="560" height="315" src="https://www.youtube.com/embed/4ALbrJVt1u4" frameborder="0" allowfullscreen > < /iframe >

Then after we need to write simple jQuery function,

which on click just extends the YouTube video source with the autoplay parameter thus plays the video.

I also prevent the link from behaving like it normally would. Simple as that.

Following script should do the trick.


	jQuery(document).ready(function() {
		jQuery('#playVideo').on('click', function(ev) {
			jQuery("#youtubeVideo")[0].src += "&autoplay=1";
			ev.preventDefault();
		});
	});

I hope this will work for you and Maybe this is useful for you in the future. 😉

If you have any queries, please do not hesitate to contact me at Jainish Senjaliya

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s