I am using YouTube video in the hero section of webpage,video play fine on iPhone, Desktop however its doesn't auto play on iPad.
I did add all the necessary attributes to it based on various tutorials. However its doesn't auto play
<div class="bg-video-wrapper"> <iframe allow="autoplay" src="https://www.youtube.com/embed/t-ZNZYCB39s?rel=0&showinfo=0&autoplay=1&loop=1&mute=1&playsinline=1&background=1" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen playsinline allow="autoplay; encrypted-media; picture-in-picture"></iframe></div>Is there an working solution or iOS doesnt allow autoplay of YouTube videos.
I tried with YouTube API, even that doesnt seem to work
var tag = document.createElement('script'); tag.src = "https://www.youtube.com/iframe_api"; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); // 2. Create a <div> (player) and create a player variable. var player; function onYouTubeIframeAPIReady() { player = new YT.Player('player', { videoId: '-VmL6-zpgx8', // YouTube Video ID playerVars: {'autoplay': 1,'loop': 1,'playlist': '-VmL6-zpgx8','mute': 1,'playsinline': 1 }, events: {'onReady': onPlayerReady } }); } // 3. Function to play video when player is ready function onPlayerReady(event) { event.target.playVideo(); } // 4. Ensure autoplay on iOS devices function isIOS() { return /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream; } if (isIOS()) { document.addEventListener('touchstart', function() { player.mute(); player.playVideo(); }); } .bg-video-wrapper { position: relative; width: 100%; height: 100vh; overflow: hidden; } .bg-video-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }<div class="bg-video-wrapper"><iframe id="video-iframe" src="https://www.youtube.com/embed/t-ZNZYCB39s?rel=0&showinfo=0&autoplay=1&loop=1&mute=1&playsinline=1&background=1" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen playsinline allow="autoplay; encrypted-media; picture-in-picture"></iframe>