Performant Youtube Video Embed Plugin - jquery.youtubevideo.js
File Size: | 41.3 KB |
---|---|
Views Total: | 3069 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

The jQuery YoutubeVideo.js plugin enables you to embed Youtube videos into the webpage in a simple and efficient way.
The plugin fetches & displays the thumbnail with a play button on the page and prevents the automatic load of the Youtube video player until you click the thumbnail.
More features:
- Also supports Youtube playlist.
- Custom player parameters.
- Custom thumbnail quality.
- Custom aspect ratio.
- Callback functions.
How to use it:
1. Download and insert the JavaScript file jquery.youtubevideo.js
after jQuery.
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"> </script> <script src="js/jquery.youtubevideo.js"></script>
2. Create an element in which you want to place the Youtube video and specify the Youtube video ID in the data-ytb-video
attribute as follows:
<div class="demo" data-ytb-video="PknU1QEV4Zo"></div> <div class="demo" data-ytb-video="l98awDe5trg"></div> <div class="demo" data-ytb-video="L7OkVdL_CbM"></div> ...
3. Initialize the Youtube video plugin and done.
$('.demo').youtubeVideo();
4. Customize the Youtube video by passing the following options object to the youtubeVideo()
function.
$('.demo').youtubeVideo({ // custom layout layout: { wrap: $('<div />', { class: 'ytb-video-wrap' }), container: $('<div />', { class: 'ytb-video-container' }), iframe: $('<iframe />', { class: 'ytb-video-iframe' }), button: $('<div />', { class: 'ytb-video-play-button'}) .append('<svg viewBox="0 0 68 48"><path class="ytb-video-play-button-bg" d="M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z" fill="#212121" fill-opacity="0.8"></path><path d="M 45,24 27,14 27,34" fill="#fff"></path></svg>'), }, /* 56.25 - 16:9 75.25 - 4:3 80.25 - 5:4 100 - 1:1 */ aspectRatio: 56.25, /* 'default' - 120x90 'mqdefault' - 320x180 'hqdefault' - 480x360 'sddefault' - 640x480 'maxresdefault' - 1280x720 'http://...' - custom image */ cover: 'mqdefault', // custom parameters parametrs: 'autoplay=1&autohide=1', // play event playEvent: 'click', // or 'button' playMode: 'block', // or 'playlist' type: 'video', // Youtube API api: '', // displays the duration of the video // requires Youtube API duration: false, // displays the video title // requires Youtube API title: false, // displays the video description // requires Youtube API description: false });
This awesome jQuery plugin is developed by WahaWaher. For more Advanced Usages, please check the demo page or visit the official website.