How come this Youtube embedded video background doesn't play in Safari or Chrome Mobile?</a></h1> </div> <div class="grid fw-wrap pb8 mb16 bb bc-black-075"> <div class="grid--cell ws-nowrap mr16 mb8" title="2016-01-12 19:07:53Z"> <span class="fc-light mr2">Asked</span> <time itemprop="dateCreated" datetime="2023-05-05T00:28:35.360" class="fromnow">May 05 '23 at 00:28</time> </div> <div class="grid--cell ws-nowrap mr16 mb8"> <span class="fc-light mr2">Active</span> <time class="fromnow" title="2023-05-05T00:32:38.287" datetime="2023-05-05T00:32:38.287">May 05 '23 at 00:32</a> </div> <div class="grid--cell ws-nowrap mb8" title="Viewed 94 times"> <span class="fc-light mr2">Viewed</span> 94 times </div> </div> <div id="mainbar" role="main" aria-label="questions and answers"> <div id="question" class="question" data-questionid="76178136" data-ownerid="19271732" data-score="0"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="76178136"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="0">0</div> <button class="js-bookmark-btn s-btn s-btnunset c-pointer py4"> <svg aria-hidden="true" class="svg-icon iconBookmark" width="18" height="18" viewBox="0 0 18 18"><path d="M6 1a2 2 0 00-2 2v14l5-4 5 4V3a2 2 0 00-2-2H6zm3.9 3.83h2.9l-2.35 1.7.9 2.77L9 7.59l-2.35 1.7.9-2.76-2.35-1.7h2.9L9 2.06l.9 2.77z"></path></svg> <div class="js-bookmark-count mt4" data-value=""></div> </button> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>I have this Youtube video as the background of my site. It works exactly as intended in Opera, Brave, desktop Chrome, etc. But I have two issues:</p> <ol> <li>The video doesn't play automatically in Safari or Chrome on iOS, and the Youtube play button remains visible in the middle of the video (haven't tested on Android yet).</li> <li>Sometimes the video doesn't load upon the first visit to the page when I view it on my actual web domain instead of with the live server. It then works after a refresh.</li> </ol> <p>This is the div in the body of my page with the video:</p> <pre><code> <div class="video-container"> <iframe src="https://www.youtube.com/embed/tSbwuwQqO3A?controls=0&autoplay=1&mute=1&playsinline=1&playlist=tSbwuwQqO3A&loop=1"></iframe> </div> </code></pre> <p>and here is the CSS :</p> <pre><code>.video-container { width: 100vw; height: 100vh; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: -99; } iframe { position: absolute; top: 50%; left: 50%; width: 100vw; height: 100vh; transform: translate(-50%, -50%); pointer-events: none; } </code></pre> <p>I tried hosting the video locally in the project folder using a HTML video tag with the source set to the .mp4 file. I tried putting autoplay, loop, muted, playsinline and allowfullscreen inside of the tag, but the video wouldn't display full screen the same way as the Youtube embed does, which is the way I need it to.</p></div> <div class="mt24 mb12"> <div class="post-taglist grid gs4 gsy fd-column"> <div class="grid ps-relative"> <a href="../../questions/tagged/css" class="post-tag js-gps-track" title="show questions tagged 'css'" rel="tag">css</a> <a href="../../questions/tagged/video" class="post-tag js-gps-track" title="show questions tagged 'video'" rel="tag">video</a> <a href="../../questions/tagged/youtube" class="post-tag js-gps-track" title="show questions tagged 'youtube'" rel="tag">youtube</a> <a href="../../questions/tagged/background-image" class="post-tag js-gps-track" title="show questions tagged 'background-image'" rel="tag">background-image</a> <a href="../../questions/tagged/embedded-video" class="post-tag js-gps-track" title="show questions tagged 'embedded-video'" rel="tag">embedded-video</a> </div> </div> </div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="user-info "> <div class="user-action-time">edited <span title="2023-05-05T00:32:38.287" class="relativetime">May 05 '23 at 00:32</span></div> <div class="user-gravatar32"></div> <div class="user-details" itemprop="author" itemscope="" itemtype="http://schema.org/Person"> <span class="d-none" itemprop="name">k7xyz</span> <div class="-flair"></div> </div> </div> </div> <div class="post-signature owner grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked May 05 '23 at 00:28">asked May 05 '23 at 00:28</time> <a href="../../users/19271732/k7xyz" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/19271732.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="k7xyz" /> </a> <div class="s-user-card--info"> <a href="../../users/19271732/k7xyz" class="s-user-card--link">k7xyz</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">1</li> <li class="s-award-bling s-award-blingbronze" title="1 bronze badges">1</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-76178136" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="76178136" data-min-length="15"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> <li id="comment-134347707" class="comment js-comment " data-comment-id="134347707" data-comment-owner-id="12325015" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment134347707_76178136"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Does this answer your question? [YouTube Autoplay does not work with iFrame](https://stackoverflow.com/questions/40685142/youtube-autoplay-does-not-work-with-iframe)</span> – <a href="../../users/12325015/rx2347" title="1,071 reputation" class="comment-user ">rx2347</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/76178136/how-come-this-youtube-embedded-iframe-video-background-doesn-t-play-in-safari-#comment134347707_76178136"><span title="2023-05-05T12:18:24.200 License: CC BY-SA 4.0" class="relativetime-clean">May 05 '23 at 12:18</span></a></span> </div> </div> </li> </ul> </div> </div> </div> </div> <div id="answers"> <a name="tab-top"></a> <div id="answers-header"> <div class="answers-subheader grid ai-center mb8"> <div class="grid--cell fl1"> <h2 class="mb0" data-answercount="9">0 Answers<span style="display:none;" itemprop="answerCount">0</span></h2> </div> </div> </div> </div> </div> </div> </div> <script src="../../static/js/stack-icons.js"></script> <script src="../../static/js/fromnow.js"></script> </body> </html>