Youtube embed autoplay on mobile

2019-08-02 19:17发布

I use React to set iframe with youtube video on page in correct size. All works well but for mobiles doesn't work autoplay option.

What is interesting for page, what I have as example video it works perfect.

<iframe type="text/html"  allowTransparency="true"  height="100%" width="100%" preload="metadata" gesture="media" allow="encrypted-media" className="autoplay-iframe"
            src={`https://www.youtube.com/embed/`+this.props.autoplay+`?autoplay=1&version=3&html5=1&hd=1&controls=0&loop=1&playlist=`+this.props.autoplay+`&playsinline=1&rel=0&showinfo=0&modestbranding=1&related=0&enablejsapi=1&origin=`+window.location.hostname} frameborder="0"></iframe>

above is my iframe code. I cut some part of iframe code but there are just style in styles attribute. It isn't important for autoplay. The same finally url for other page works. I'm not sure why. Any hints how I can solve this problem?

Thanks in advance.

2条回答
太酷不给撩
2楼-- · 2019-08-02 19:49

The rules have changed so most new mobiles will now let you autoplay, but most video streaming sites like youtube and vimeo haven't enabled the functionality yet. The reason the html5 video worked but the iframe didn't is because youtube disabled it.

查看更多
萌系小妹纸
3楼-- · 2019-08-02 19:57

You will not be able to implement this, since it is intentionally disabled to all mobile devices. The reason is for the user to save cellular data. It is also cited in this post.

The reason that video autoplay doesn’t work is simple. The feature is deliberately disabled in both iOS and Android for mobile devices. The reason this is done is to save mobile users money. Such devices (especially mobile phones) often use data connections that charge by bandwidth. They have data limits and going over results in a fee.

This statement was also supported with the following SO post.

查看更多
登录 后发表回答