videojs-youtube
videojs-youtube copied to clipboard
Playlist won't work on mobile
Hi, I've setup the code below and I noticed that it works only on desktop, I mean the second video won't play on mobile, only desktop.
<video id="my-video" class="video-js vjs-9-16" width="auto" height="934px" data-setup='{ "controls": true, "autoplay": true, "loop": true, "preload": "auto", "techOrder": ["youtube"], "sources": [{ "type": "video/youtube", "src": "<?= 'https://www.youtube.com/embed/' . MyHelpers::extractYouTubeId($video->conteudo) ?>"}], "youtube": { "playlist": "<?= MyHelpers::extractYouTubeId($video->conteudo) ?>,2jThTOt0IYY"}}'>
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a
web browser that
<a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
</p>
</video>
IOS 17.1.2 Chrome 120.0.6099.119
I've noticed that the playlist icon does appear for a fraction of seconds.
+1
Can you show what the result of <?= 'https://www.youtube.com/embed/' . MyHelpers::extractYouTubeId($video->conteudo) ?>
is? Should the embedded video loaded first in the playlist and then "playlist": " <?= MyHelpers::extractYouTubeId($video->conteudo) ?>,2jThTOt0IYY"
?
This is the HTML result:
<video id="my-video" class="video-js vjs-9-16" width="auto" height="934px" data-setup='{ "controls": true, "autoplay": true, "muted": true, "loop": true, "preload": "auto", "responsive": true, "techOrder": ["youtube"], "sources": [{ "type": "video/youtube", "src": "https://www.youtube.com/embed/iW4YkWdsa6g"}], "youtube": { "playlist": "iW4YkWdsa6g,2jThTOt0IYY"}}'>
I can confirm it's working on Xiaomi Redmi Note 12 Pro 5G Android 14 Google Chrome 123.0.6312.80 but won't work with Google Chrome 123.0.6312.52 on Iphone 13 IOS 17.3.1