YouTube Video Embed Optimization with yt-embed-js jQuery Plugin
File Size: | 5.26 KB |
---|---|
Views Total: | 51 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
The yt-embed-js is a lightweight jQuery Youtube video embed plugin that can reduce page load time by implementing on-demand video loading. It displays video thumbnails with play buttons instead of loading full YouTube videos immediately. The actual video content loads only after user interaction.
This jQuery plugin can be useful for websites featuring YouTube content. It can be used to improve website performance through smart resource loading. Single videos display as thumbnails until clicked, while playlists show a play button that loads the entire playlist upon interaction. This approach reduces bandwidth usage and speeds up initial page rendering.
How to use it:
1. Load the yt-embed-js plugin after including the latest jQuery library.
<script src="/path/to/cdn/jquery.min.js"></script> <script src="/path/to/embed.js"></script>
2. Embed a single video or a playlist into your document. Make sure to replace the video ID or playlist ID with your own:
<!-- single & live --> <div class="single" data-id="Cv8_oc7kOHA"></div> <!-- playlist --> <div class="playlist" data-id="PLz71VZBVEZQkgIRd5wWEOV3PIYXUFK4pV"></div>
3. Modify the default CSS styles to adjust the appearance of the embedded videos:
.single { position: relative; display: inline-block; } .single img { display: block; } .overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } .single iframe { width: 320px; height: 180px; } .playlist iframe { width: 320px; height: 180px; }
4. To change the default play button, rename your custom icon file to play.svg
and replace the original play button file in your project.
How it works:
The plugin works by initially displaying a placeholder image and play button.
The _embd
function, triggered on page load, iterates through divs with the class "single."
It constructs a clickable element containing the video thumbnail and a play button overlay. Upon clicking, the embd
function replaces the placeholder with the actual YouTube iframe, using the video ID you provide.
A similar process occurs for playlists, with the _pl
and embdpl
functions handling playlist embeds and iframe generation. The embedded CSS controls the placeholder and iframe styling.
See Also:
This awesome jQuery plugin is developed by akakadir. For more Advanced Usages, please check the demo page or visit the official website.