Comments (3)
If the initial click of the component makes the iframe and injects it, isn't that by default lazily loading until the user is ready to consume it?
The attribute is about holding off the load until it is close to the viewport. Since the user can click it, it's in the viewport already. If we want this kind of behavior, then our component should use IntersectionObserver
(I think, could be another observer) to check where it is on the viewport. When it's close to being scrolled in, go ahead and load the iframe up. So we'd essentially polyfill this attribute over our custom element.
from lite-youtube-embed.
Just read about this component a few minutes ago and read a bit across everything.
If you consider "lazy" loading the iframe automatically when it reaches the viewport it would be great if that would be an opt-in or opt-out feature.
As I saw from the demos the current implementation, that the user has to actively click to load the iframe, this component seems to be somehow GDPR compliant (maybe only partially, don't know exactly) because there is no interaction with YouTube whatsoever until that point. Especially if you provide a custom locally stored preview image.
But as this a very big topic (at least here in Germany) it would be great to have a simple component like this in our toolbelt. For performance and GDPR reasons.
from lite-youtube-embed.
The more I learn about loading=lazy
the more I think it's not a great fit for this project.
IMO it's the superquick hack to make an existing youtube embed a tad better (only only in the few browsers that support this right now).
it helps a lot for embeds that are not in the viewport.
but if there are embeds that load within the viewport but are not always clicked, then the YT download/JS costs still were pretty painful.
so I think we won't be needing this attribute. :)
from lite-youtube-embed.
Related Issues (20)
- Failed to execute 'postMessage' HOT 2
- Type declarations
- On mobile, double click is neccesary HOT 8
- Display a title on the video thumbnail HOT 2
- Graceful degradation if YT API breaks
- NPM version is outdated HOT 1
- Custom Width and Height for Youtube shorts HOT 6
- Will it be counted as views on YouTube? HOT 2
- sometime no image loaded HOT 1
- does not work on mobile HOT 2
- Early click on Progressively Enhanced version directs user to youtube.com HOT 1
- A11Y: Why `a.lty-playbtn` instead of `button`? HOT 2
- Start and end params not working when using js-api
- I am using lite youtube embed and I want to get onStateChange player.getPlayerState():
- How can we keep the lower quality preview?
- Could we get a more noob friendly guide for Pro-usage? 😇
- Deprecated navigator.vendor HOT 1
- v0.3.2 Release HOT 1
- Yield on LiteYTEmbed click listener to reduce INP impact HOT 3
- Offering the class in ESM format
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from lite-youtube-embed.