2

Is there a way to lay a div tag on top of a YouTube iframe for full-screen?

I was able to lay a div tag on top of a YouTube iframe with the following code:

<html>
    <head></head>
    <body>
        <div style="position:relative">
            <iframe width="560" height="315" src="https://www.youtube.com/watch?v=tQ0yjYUFKAE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
            <div style="position:absolute;top:0px;left:0px;background:#000;width:500px;height:500px;"></div>
        </div> 
    </body>
</html>

But when YouTube iframe above is full-screen, the added div tag disappears.

Please let me know if there is a way to solve this problem.

Andrew
  • 307
  • 7
  • 13
negabaro
  • 3,127
  • 7
  • 21
  • 33
  • 1
    I think its do with the fact that iframe would behave separate to div tag which would be coupled to rest of body. While I frame would jump out in its independent paint thread and overlap rest of content in full screen mod. What you may do is run JS mutation observer on iframe for changes and if so occur also trigger same on div. https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver – Syed May 30 '21 at 20:51
  • appending `?wmode=opaque` to the url seems to do the trick. https://stackoverflow.com/questions/7016680/how-to-show-a-div-over-a-youtube-video-z-index – sagar1025 May 30 '21 at 21:20
  • @sagar1025 I have tried that '?wmode=opaque' also. but it didn't not change. – negabaro May 31 '21 at 19:05
  • Did you try to specify a z-index on the div? – Ajay Gupta Jun 01 '21 at 03:14

0 Answers0