I
I
Ivan13312021-04-13 17:57:38
YouTube
Ivan1331, 2021-04-13 17:57:38

Autoplay video in carousel?

Good day, such a problem, I need active videos in the carousel (I use OWL) to automatically start playing. Initially, I just added the autoplay value to the iframe via js:

//циклом обхожу все irame и передаю их в функцию которая добавляет нужные атрибуты:
 let oldLink= video.getAttribute('src');
    let newLink=oldLink+'?rel=0&modestbranding=1&autohide=1&mute=1&autoplay=1';
    video.setAttribute('src', newLink);
    video.setAttribute('allow','accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture');

But there is one problem with this approach, it doesn't work on mobile phones. Found the implementation through the YouTube API:
<div id="player"></div>
                    <script>
                        // 2. This code loads the IFrame Player API code asynchronously.
                        var tag = document.createElement('script');

                        tag.src = "https://www.youtube.com/iframe_api";
                        var firstScriptTag = document.getElementsByTagName('script')[0];
                        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

                        // 3. This function creates an <iframe> (and YouTube player)
                        //    after the API code downloads.
                        var player;
                        function onYouTubeIframeAPIReady() {
                            player = new YT.Player('player', {
                                width: '100%',
                                videoId: '1w1212w12w12w',
                                playerVars: { 'autoplay': 1, 'playsinline': 1 },
                                events: {
                                    'onReady': onPlayerReady
                                }
                            });
                        }

                        // 4. The API will call this function when the video player is ready.
                        function onPlayerReady(event) {
                            event.target.mute();
                            event.target.playVideo();
                        }
                    </script>

This option already works on a mobile phone, but I just can’t put it in the carousel, I only have 1 video displayed. As far as I understand, this is the only way to make the video automatically run on phones (if not, tell me how else you can), but I can’t apply it to the carousel, tell me how to make this code so that this code can be called for each video in a carousel?

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question