Comments (6)
@stamat Thank you for the quick update. It did move the needle about 5 points on average up. However it is still wrecking the score. That other link I sent, scores a perfect 100 with YouTube embeds. So it must be possible? It is amazing that it can get a perfect 100 on this page https://paulirish.github.io/lite-youtube-embed/ I don't program in JS hardly ever so it is not my expertise but if that other script had the background abilities of this script it would be amazing for page performance.
from youtube-background.
@stamat Sound exciting! Can't wait to test the new version. I will say though I really appreciate the play/pause for WCAG/ADA compliance, and offscreen pause.
I'm building a pretty big brand website and they need WCAG / ADA / 501 compliance, but also want a video header.
Here is an image. I've put two SVG layers on top to give it a curve look, and a custom CSS button for play/pause.
from youtube-background.
from youtube-background.
Hey @Xeno4j I seriously doubt that something can be done, it's the youtube script... Maybe we should try and add async
to the script injection...
injectScript() {
if (window.hasOwnProperty('YT') || document.querySelector('script[src="https://www.youtube.com/player_api"]')) return
const tag = document.createElement('script');
tag.src = "https://www.youtube.com/player_api";
const firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
}
Basically that's the only thing we can do, that comes to mind.
To gain on performance, try hosting your own, small MP4s that loop in the background, or maybe host the videos on Vimeo. This script also accepts MP4s and Vimeo. I mean eather using your own bandwidth or reducing your page speed by using youtube/vimeo bandwidth... a tradeof has to be made 😬
I'll let you know when I have a solution... Pretty swamped with work atm, so it might be a while... Sorry dude!
from youtube-background.
@Xeno4j alright, I did it right away. Please use the new version 1.1.7
, I've added the async
attributes for the injected scripts. I'm not sure that it will increase the performance so much because youtube injects it's own scripts, but at least is should reduce the blocking of the main thread.
Do let me know if there is any improvement when you try it out. And thank you for testing! ✨
from youtube-background.
@Xeno4j I'll take a deep dive when I have a moment. It is probably possible - we can make a lite version of this, that doesn't use the iframe API and this would solve all of your issues. There were requests that this gets play, pause, and other shananigans, this is why the API was introduced. It also has the pause outside the viewport ability, to prevent the usage of the bandwidth when the visitor is not looking at the video background.
Dropping all this functionality and having only the video loop in the background like it used to do several years ago would solve your problems. But keep in mind, it will drain the visitors bandwidth and impact the performance constantly.
I'll soon get back to this. I'm planning to start a new version of this code as a custom component which would make things much easier.
Thanks for making me look into the performance of this! ✨ Appreciate it hombre!
from youtube-background.
Related Issues (20)
- this.player.getvideodata is not a function HOT 1
- Not working on mobiles and tablets HOT 1
- Embedded YT playback quality poor on iOS Safari HOT 2
- feature: youtube-nocookie.com/embed/.... HOT 2
- Preview: file maxresdefault.jpg missing for some videos HOT 1
- How do I listen for the "video-background-play" event and other events? HOT 3
- Update Video URL after Initialization HOT 2
- Not able to disable on mobile HOT 1
- Issues with non-jquery working HOT 2
- Programmatically set the volume HOT 2
- youtube-background | Video stop on mobile when switching tabs/ windows HOT 5
- Bugs with starting video playback without sound and pausing the video when scrolling HOT 9
- Yarn install fail on Windows after 1.0.15 HOT 1
- The poster parameter is not working HOT 1
- Lighthouse tests complain that iframe does not have a title . HOT 2
- "explore video" pops up when the video is paused. HOT 3
- Playing private Vimeo videos HOT 4
- Add `.mov` and `.m4v` to VideoBackground.MIME_MAP HOT 1
- Need some help troubleshooting with 'strange' behavior
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 youtube-background.