Overlay Opaque Div Over Youtube Iframe

overlay opaque div over youtube iframe

Information from the Official Adobe site about this issue

The issue is when you embed a youtube link:

https://www.youtube.com/embed/kRvL6K8SEgY

in an iFrame, the default wmode is windowed which essentially gives it a z-index greater then everything else and it will overlay over anything.

Try appending this GET parameter to your URL:

wmode=opaque

like so:

https://www.youtube.com/embed/kRvL6K8SEgY?wmode=opaque

Make sure its the first parameter in the URL. Other parameters must go after

In the iframe tag:

Example:

<iframe class="youtube-player" type="text/html" width="520" height="330" src="http://www.youtube.com/embed/NWHfY_lvKIQ?wmode=opaque" frameborder="0"></iframe>

Overlay image on YouTube embed

The below should give you a decent starting point, to refine for your purposes:

Demo Fiddle

HTML

<div>
    <iframe class="youtubeplayer" width="700" height="455" src="http://www.youtube.com/embed/ScfXNmDkvHo?wmode=opaque" frameborder="0" allowfullscreen></iframe>
</div>

CSS

div {
    position:relative;
    cursor:pointer;
    width:700px;
}
div:before {
    content:'';
    position:absolute;
    top:39%;
    left:44%;
    height:60px;
    width:85px;
    border-radius:10px;
    border:1px solid #000;
    text-align:center;
    line-height:30px;
    background:#3AA8FF;
    transition:all 200ms ease-in;
}
div:after {
    content:'';
    position:absolute;
    top:44.5%;
    left:49%;
    display:inline-block;
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-left: 12px solid #fff;
    border-bottom: 6px solid transparent;
}
div:hover:before {
    background:orange;
}

DIV overlay YouTube embed code

Just add the parameter wmode=transparent to the embed code:

Possible duplicate and solution here overlay opaque div over youtube iframe

overlay opaque div over gametrailers iframe

Temporary solution

This is the old url to embed:

http://media.mtvnservices.com/mgid:moses:video:gametrailers.com:722265

This is the new url in the iframe:

http://media.mtvnservices.com/embed/mgid:arc:video:gametrailers.com:0a115b6c-2d82-4a8c-b08b-4b6975e4c0dc

As a temporary solution I change the iframe url to this undefined URL that I found by randomly tweaking the iframe url and embed this instead of using the iframe:

http://media.mtvnservices.com/mgid:arc:video:gametrailers.com:0a115b6c-2d82-4a8c-b08b-4b6975e4c0dc

It looks like this:

<embed wmode="opaque" width="550" height="350" src="http://media.mtvnservices.com/mgid:arc:video:gametrailers.com:0a115b6c-2d82-4a8c-b08b-4b6975e4c0dc"  quality="high" bgcolor="000000" name="efp" align="middle" type="application/x-shockwave-flash"  pluginspage="http://www.macromedia.com/go/getflashplayer"  flashvars="autoPlay=false"  allowfullscreen="true"></embed>

css: create color overlay on top of youtube embed

In your HTML, make the overlay div a sibling of iframe.
Then just use absolute positioning inside your common parent, like so:

.video-player {
  position: relative;
  border-radius: 10px;
  height: 360px;
  width: 640px;
}

.color-overlay {
  position: absolute;
  top: 0;
  opacity: 0.5;
  height: 100%;
  width: 100%;
  background: blue;
}

<div class="video-player mx-auto">
    <iframe src="https://www.youtube.com/watch?v=vT__WcbNWpY&t=3s&ab_channel=OceanConservationNamibia" width="640" height="360"></iframe>
    <div class="color-overlay"></div>
</div>

.videoContainer {
    position: relative;
    width: 100%;
    height: 100%;
    //padding: 20px;
    border-radius: 5px;
    background-attachment: scroll;
    overflow: hidden;
}
.videoContainer video {
    min-width: 100%;
    min-height: 100%;
    position: relative;
    z-index: 1;
}
.videoContainer .overlay {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 2;
    background: green;
    opacity: 0.5;
}