overflow: hidden not working when zooming on a YouTube iframe using transform

Question

So far I have checked out the following questions/answers...

b: add "?wmode=opaque" to the iframe source link

Both of those questions are pretty old, but I tried one, then the other, then both and several other solutions other comments provided that I knew wouldn't work.

<!-- YOUTUBE -->
  <div class="row containerStyle" style="position: relative;">
    <div class="col-sm-12">
      <div class="badge badge-pill pillStyle">
      <span  class="ytImage">
        <span class="g-ytsubscribe text-left" data-channel="xyz" data-layout="default" data-count="default">
          <script src="https://apis.google.com/js/platform.js"></script>
          <div class="g-ytsubscribe" data-channel="xyz" data-layout="default" data-count="default"></div>
        </span>
      </span>
        <a href="https://www.youtube.com/user/xyz" class="viewAll">VIEW ALL <span class="vaArrow">&rarr;</span></a>
      </div>
      <div id="youtubeWrap">
        <p id="youtubeLabel">ORIGINAL CHOREOGRAPHY<br /> <span id="subytLabel">by: XYZ <br />SONG ft. Artist, Another Guy, DJ Someone</span></p>
        <img src="./images/rip2.png" class="ytimageStyle" />
        <iframe id="arrowLink" class="anIframe" src="https://www.youtube.com/embed/-xyz?wmode=opaque;rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" scrolling="no" allowfullscreen></iframe>
      </div>
    </div>
  </div>

My CSS:

#youtubeWrap {
  position: relative;
  overflow: hidden;
}

#youtubeWrap iframe, #youtubeWrap object, #youtubeWrap embed {
  -moz-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}

#youtubeWrap iframe:hover, #youtubeWrap object:hover, #youtubeWrap embed:hover {
  -moz-transform: scale(1.2);
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
}

#youtubeLabel {
  color: #FFFFFF;
  position: absolute;
  z-index: 12;
  top: 50%;
  left: 3%;
  font-weight: 300;
  width: 35%;
  font-size: 20px;
  overflow: hidden;
}

#subytLabel {
  font-size: 14px;
}

.ytImage {
  height: 25px;
  float: left;
  padding: 0 15px;
}

.ytimageStyle {
  z-index: 10;
  position: relative;
  height: 100%;
  width: 40%;
}

.anIframe {
  width: 70%;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}

What I'm trying to accomplish is for the video to zoom in slightly when the user hovers over it. However, I don't want the overflow to be visible. As I have it here it does work "most" of the time. If you mouseover and mouseout repeatedly the overflow will show about 1/10 of the time and sometimes just get stuck. I've done a fair amount of due diligence, but have not been able to find a solution that works here.

EDIT: This image is whats happening, and it seems to only be a problem in Chrome.

EDIT(2): I just found this other question from four years ago. Still kinda old and nothing has worked for me, but it's slightly more recent and I wanted to share everything in case I missed something.

Bug with transform: scale and overflow: hidden in Chrome

Here's a stripped down fiddle: https://jsfiddle.net/hoxv2ghg/13/ As Eric's edit says, works in FF, but Chrome appears to do some recalculation after the transition is complete. — disinfor, Mar 23 '18 at 22:51

score 1 · Accepted Answer · answered Mar 23 '18 at 23:09

After playing with the fiddle I created, I came up with a hacky solution that may work for you.

* {
  box-sizing: border-box;
}

#youtubeWrap {
  position: relative;
  overflow: hidden;
  border: red 1px solid;
}

.inner {
  position: relative;
  overflow: hidden;
}

#youtubeWrap .inner iframe {
  position: relative;
  display: block;
  transform: scale(1.0);
  animation-name: transform-out;
  animation-delay: 0s;
  animation-duration: .5s;
  animation-direction: normal;
  animation-fill-mode: forwards;
}

#youtubeWrap .inner:hover iframe {
  border: green 1px solid;
  animation-name: transform, longtransform;
  animation-delay: 0s, .5s;
  animation-duration: .5s, 10000s;
  animation-direction: normal, normal;
  animation-fill-mode: forwards, forwards;
}

@keyframes transform {
    from {transform: scale(1.0);}
    to {transform: scale(1.2);}
}

@keyframes longtransform {
  from {transform: scale(1.2);}
    to {transform: scale(1.3);}
}


@keyframes transform-out {
    from {transform: scale(1.2);}
    to {transform: scale(1.0);}
}

<div id="youtubeWrap">
  <div class="inner">
    <iframe id="arrowLink" class="anIframe" src="https://www.youtube.com/embed/-xyz?wmode=opaque;rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" scrolling="no" allowfullscreen></iframe>
  </div>
</div>

The YouTube video doesn't appear to load in the snippet, but I've included the updated fiddle:

https://jsfiddle.net/hoxv2ghg/27/

The trick is using the CSS animations and applying two animations to the hover state: transform and longtransform. Essentially, we fire the first transform and that takes .5s. The we setup the long transform for 10000s, but make the transformation barely visible. The scale(1.3) in the longtransform could be 1.21 and I think it would work.

Hopefully this helps you out.

I see what you did there and I like it. I was trying to avoid adding another div if possible, but this might be the best solution for this particular issue. It's probably the weirdest problem I've ever had. I'll accept your answer after I integrate this solution into my page and it still works. Thank you for spending the time. :) — Eric, Mar 23 '18 at 23:25
Had a few layout issues there for a second, but it's working perfectly now! Thank you so much!!!! — Eric, Mar 24 '18 at 00:09

score 1 · Answer 2 · answered Apr 03 '18 at 10:14

1

Just adding will-change: transform; to the IFRAME styles fixed mine.

answered Apr 03 '18 at 10:14

Yousef Salimpour

694
1
7
15

overflow: hidden not working when zooming on a YouTube iframe using transform

2 Answers2