desbordamiento: oculto no funciona al hacer zoom en un iframe de YouTube usando transformar

Emily Publicado en Dev

Eric

Hasta ahora he revisado las siguientes preguntas / respuestas ...

b: agregue "? wmode = opaque" al vínculo de origen del iframe

Ambas preguntas son bastante antiguas, pero probé una, luego la otra, luego ambas y varias otras soluciones que otros comentarios proporcionaron que sabía que no funcionarían.

<!-- 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>

Mi 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

disinfor

Después de jugar con el violín que creé, se me ocurrió una solución hacky que puede funcionar para ti.

* {
  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>

El video de YouTube no parece cargarse en el fragmento, pero he incluido el violín actualizado:

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

El truco consiste en utilizar las animaciones CSS y aplicar dos animaciones al estado de desplazamiento: transformy longtransform. Esencialmente, disparamos la primera transformación y eso toma .5s. Configuramos la transformación larga para 10000, pero hacemos que la transformación sea apenas visible. El scale(1.3)en el longtransformpodría ser 1,21 y creo que funcionaría.

Espero que esto te ayude.

Este artículo se recopila de Internet, indique la fuente cuando se vuelva a imprimir.

En caso de infracción, por favor [email protected] Eliminar

Editado en2020-11-29

Déjame decir algunas palabras

0Comentarios

Iniciar sesiónRevisión de participación posterior

Anterior:La compilación de JAVAFX falla con Intellij en MAC

TOP Lista

Artículos