Lite-YouTube & Vimeo - Embed

Provide videos with a supercharged focus on visual performance. This custom element renders just like the real thing but approximately 224× faster.

Requirement:

Download and install Unlimited Elements for Elementor Plugin

If you love the widget, you can support me by buying a cup of coffee

Features:

• No dependencies; it's just a vanilla web component.
• It's Shadow Dom encapsulated!
• It's responsive 16:9 ratio by default and 9:16 when you have enabled YouTube Shorts.
• It's accessible via keyboard and will set ARIA via the videotitle attribute
• It's locale-ready; you can set the videoplay to have a properly locale-based label
• Set the start attribute to start at a particular place in a video
• Loads placeholder image as WebP with a Jpeg fallback

Changelog:

Version: 0.1

1. Added Playlist: Setting the YouTube playlistid allows the playlist interface to load on interaction. Note, that this still requires a videoid to load a placeholder thumbnail as YouTube does not return a thumbnail for playlists in the API.
2. Ability to change the width & height of the YouTube player when the user selects Short - No option was available before.
3. Change the quality to Thumbnail Quality for better legibility
4. Added a Fallback Link when users disabled JS on their browsers
   A fallback appears in any of the following circumstances:
   a) Before the component is initialized
   b) When JS is disabled (like <noscript>)
   c) When JS fails or the lite-youtube script is not loaded/executed
   d) When the browser doesn't support web components
5. Path changes from lite-youtube to lite-embed folder
   
   YouTube

<script type="module" src="/wp-content/uploads/ac_assets/lite-youtube/lite-youtube.js"></script> 

to 

<script type="module" src="/wp-content/uploads/ac_assets/video-embed/lite-youtube.js"></script>

Vimeo

<script type="module" src="/wp-content/uploads/ac_assets/lite-youtube/lite-youtube.js"></script>

to 

<script type="module" src="/wp-content/uploads/ac_assets/video-embed/lite-vimeo.js"></script>

Only available when you select YouTube as a source:

• Adds nocookie attr for use with using youtube-nocookie.com as an iframe embed uri
• Adds loading=lazy to enable lazy-loading on image placeholder for better performance
• Adds short attr for enabling experimental YouTube Shorts mobile interaction support

FAQ:

1. The video shows up fine on Editor but fails to load on the live site

The script tag must have the type="module" attribute to work properly. So the proper syntax should be <script type="module" src=".js"></script> not <script src=".js"></script>. This is why the video is not working.

- To fix the issue, you must manually add the script tag using Elementor's Custom Code or any plugin that allows you to inject the script.

Something like this:

• YouTube:

<script type="module" src="/wp-content/uploads/ac_assets/video-embed/lite-youtube.js"></script>

• Vimeo:

<script type="module" src="/wp-content/uploads/ac_assets/video-embed/lite-vimeo.js"></script>

and remove all the script tags after you fix it, see the attachment below

Size Comparision

• Normal YouTube iframe size: 1.7MB

• Lite YouTube Embed Size: 40KB can be reduced even further if you enable lazy loading in the settings