Safari 浏览器中的嵌入式视频高度问题

Question

我有两个水平对齐的响应式 div，它们设置为相同的高度。 左边是嵌入的 youtube 视频，右边是固定图像。

在 Chrome 中测试没有问题，但如果在 Safari 中测试，youtube 视频不会填满 div 的完整高度。

html 标记是：

    <div id="IndexBanners">

    <div class="indexbannerimages effect first">
    <div id="player"></div>

    <script src="https://www.youtube.com/player_api"></script>

    <script>
      // create youtube player
      var player;

      function onYouTubePlayerAPIReady() {
        player = new YT.Player('player', {
          videoId: 'GfaiXgY114U',
          autoplay: '0',
          controls: '0',
          width: '100%',
          height: '100%',

          playerVars: {
            rel: 0,
            showinfo: 0
          },

          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
      }

      // autoplay video
      function onPlayerReady(event) {
        // event.target.playVideo();
      }

      // change mask opacity depending on player state
      function onPlayerStateChange(event) {

        if (event.data === -1) {
          document.getElementById("mask1").setAttribute("style", "opacity:1; -moz-opacity:1; filter:alpha(opacity=100)");
        }

        if (event.data === 0) {
          document.getElementById("mask1").setAttribute("style", "opacity:1; -moz-opacity:1; filter:alpha(opacity=100)");
        }

        if (event.data === 1) {
          document.getElementById("mask1").setAttribute("style", "opacity:0; -moz-opacity:0; filter:alpha(opacity=0)");
        }

        if (event.data === 2) {
          document.getElementById("mask1").setAttribute("style", "opacity:1; -moz-opacity:1; filter:alpha(opacity=100)");
        }

      }

    </script>
    <div id="mask1">
      <div class="watchText">Watch The Video</div>
      <div class="watch"></div>
    </div>
    </div>

    <div class="indexbannerimages effect">
    <a href="https://placehold.it"><img src="https://placehold.it/795x436"></a>
    <div id="mask2">
      <div class="newsText">Latest News</div>
      <div class="news"></div>
    </div>
   </div>


   </div>

css:

#IndexBanners {
 display: flex;
 margin-top: 20px;
}

.indexbannerimages {
 flex: 1 0 0;
 position: relative;
}

img {
 max-width: 100%;
 height: auto;
 vertical-align: top;
}

.indexbannerimages .watch {
 background: url(../images/play-icon.png) no-repeat scroll 0% 25% / 14px auto;
}

.indexbannerimages .news {
 background: url(../images/news-icon.png) no-repeat scroll 0% 25% / 14px auto;
}

.watchText {
 color: #fff;
 text-transform: uppercase;
 padding-top: 23%;
 margin: 0;
}

.newsText {
 color: #fff;
 text-transform: uppercase;
 padding-top: 23%;
 margin: 0;
}

.effect #mask1,
.effect #mask2 {
 text-align: center;
 font-size: 16px;
 color: #fff;
 background-color: rgba(00, 00, 00, 0.8);
 opacity: 0.75;
 transition: all 0.5s ease-in-out;
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 cursor: pointer;
}

.effect:hover #mask1,
.effect:hover #mask2 {
 visibility: hidden;
 opacity: 0.0;
 transition: all 0.5s ease-in-out;
}

@media (max-width:600px) {
#IndexBanners {
 display: block;
}

.first {
 position: relative;
 padding-bottom: 56.25%;
 height: 0;
}

.first iframe {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}
}

我在这里设置了一个小提琴来演示这个问题。 https://jsfiddle.net/bgaqfvxm/3/

对于 Safari 中这个大小问题的修复有什么建议吗？

Answer 1

通过将以下内容添加到 css 解决了问题

.first iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

感谢@Michael Coker 在@media 600px 以下查询中使用的原始css