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

我有两个水平对齐的响应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>

我在这里摆好了一把小提琴来演示这个问题

---

关于Safari中此尺寸问题的解决方案，有什么建议吗？

通过在css中添加以下内容来解决此问题

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

---

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

问题通过在css中添加以下内容得以解决

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

---

感谢@Michael Coker在@media query below 600px中使用的原始css，你会看到我解决了阻止点击播放YT视频的屏蔽问题。@Michael Coker，你会看到我解决了阻止点击播放YT视频的屏蔽问题。对我不起作用：（无论如何，谢谢对我不起作用：（无论如何，谢谢