Extract Thumbnail from youtube video url and embed it to play video by just clicking on it.
Introduction
With the help of ‘JQuery’ codes we can generate YouTube thumbnail on our front end of the website. First of all you have to copy a simple youtube watch URL of any video from youtube site like ‘https://www.youtube.com/watch?v=ODG3Vg3C_20’ ( it will be appear in the url bar when you open youtube site) and paste into a ‘p’ tag in the page of HTML, User can also change ‘p’ tag into another tag according to requirement in the script.
Where we can use
You can use this script in dynamically generated youtube codes from backend in wordpress, zoomla, and CMS based plateform, and it can be used if you want to click to play a video in popup with the help of plugin like FancyBox, ColorBox, etc.
Required supporting jquery.
<script type=’text/javascript’ src=’http://code.jquery.com/jquery-1.8.3.js’></script>
Required Css.
<style>
a, p{ display:block; width:100%; float:left; font-size:0;}
</style>
Implemented Jquery code.
<script>
$(document).ready(function(){
function getYoutubeID(url) {
var id = url.match(/(?:https?:\/{2})?(?:w{3}\.)?youtu(?:be)?\.(?:com|be)(?:\/watch\?v=|\/)([^\s&]+)/);
id = id[1];
return id;
};
$(‘p’).each(function() {
var id = getYoutubeID($( this ).html());
var thumb_url = “https://i.ytimg.com/vi/”+id+”/mqdefault.jpg”;
var youtube_url = ” https://www.youtube.com/embed/”+id+””;
$(‘<a href=”‘+youtube_url+'”><img src=”‘+thumb_url+'” /></a>’).appendTo($( this ));
});
});
</script>
HTML code (with youtube watch link).
<body>
<p>https://www.youtube.com/watch?v=ODG3Vg3C_20</p>
</body>
Support browser
| Browser |
| FireFox 3.6+ |
| Safari 5+ |
| Chrome 6 |
| Opera 10.5+ |
| IE 9 and above |
