Autoplay not working
mikeott opened this issue · comments
When adding the autoplay=1 parameter the video does not autoplay.
My code:
<lite-youtube videoid="giXco2jaZ_4" params="controls=0&showinfo=0&modestbranding=1&autohide=1&rel=0&autoplay=1&loop=1&enablejsapi=1&mute=1&vq=sd-720"></lite-youtube>
Tested on desktop browsers with the same result:
- Chrome
- Edge
- Firefox
Autoplay is already used in the script: (params.append('autoplay', '1');
The way lite-youtube-embed works is that it loads a "facade" (image with play button) first, while the video loads in the background.
When the user clicks on the facade, the video starts to "autoplay" without the user having to click the play button again.
You're correct. When I change it to autoplay=0 the video does not start when I click the facade play button. With this in mind, why would anyone using this solution want to use autoplay=0? It would be a bad experience if users had to click the initial facade play button, and then the real YouTube play button to play the video. What would be the purpose of that?
That aside, I feel it a little misleading, though not on purpose I'm sure. The readme states...
YouTube supports a variety of player parameters to control the iframe's behavior and appearance. These may be applied by using the params attribute.
...and the behaviour of autoplay as documented by YouTube states...
This parameter specifies whether the initial video will automatically start to play when the player loads.
...and so I was expecting the video to play automatically as described by the YouTube doc when I apply the autoplay=1 parameter, without waiting for user interaction.
Anyhoo, is there any way have the video play automatically? Perhaps on document load would make sense.
🤔 The purpose of the component is to "Provide videos with a supercharged focus on visual performance. This custom element renders just like the real thing but approximately 224× faster.".
If the video were to auto-play, then the whole video would be rendered immediately, negating any improvement in performance, and thus defeating the purpose of the component. 🤷
Hence, you may as well just embed the iframe in the instances where you want it to autoplay. This will achieve what you are after?
I totally get that, and it's an excellent solution. We love the fact that all the YouTube nonsense (base.js etc) doesn't get loaded initially. The difference it makes to page load times is so significant we've decided to make it a permanent tool in our development workflow.
Admittedly, perhaps my use case may be too much on the edge.
What I want to do is auto play the video only when a user scrolls down to the part of the page where it is embedded. At that time, of course we'd expect all the YouTube scripts/font etc would get loaded, but only then, not before.
By contrast, I can do this already with a regular YouTube video, but as you know embedding a regular YouTube video would still come with a performance and bandwidth penalty regardless of if the user even scrolls down to the part of the page that has the video.
It's easy enough to trigger something when the user reaches the video, but I was hoping there was a function or something that could remove the facade and start playing the video that I could trigger.
Anyhoo, I realise this is highly likely an edge case, and I don't expect any work done to accommodate it for that reason. I was hoping there was already a solution place before I forked it to work on it myself.
Cheers - love your work, consider the matter closed.
@mikeott Did you work out a solution for this, before I start re-inventing the wheel myself?
For the majority of videos on a site I'm working with, the standard behaviour works perfectly. The client has one video that they'd like to auto-play when it's scrolled into view (let's assume desktop browsers here).
@wallacio Unfortunately no. I was early into working on a solution when the requirements changed and we no longer needed to auto-play a video when it came into the viewport.
I think if I were to try again, I would consider serving up the particular video in question locally (or a remote source) with the <video> tag and then inline the autoplay attribute when it's in the viewport. Untested but it should work.
I realise it's not perfect because now you're using own bandwidth instead of someone else's, and you loose the benefit of YouTube's CDN. But it might be all you need.
If you do "re-invent the wheel" I'd be interested to know.