Lite-YouTube & Vimeo - Embed

Requirement:
Download and install Unlimited Elements for Elementor Plugin

1. Select between YouTube or Vimeo as a source.
2. Fixes the Lazy load of third-party resources with facades issue on Page Speed Insights & Lighthouse report
3. Support YouTube Shorts.

A web component that renders YouTube embeds faster. The ShadowDom web component version of Paul's lite-youtube-embed.

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

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:

-- Why is it not working?

To work properly, the script tag needs to have the type="module" attribute. 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 have to manually add the script tag using Elementor's Custom Code or any plugin that allows you to inject script.

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

Size Comparision

• Normal YouTube iframe size: 1.7MB

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