Question

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

在Chrome中测试没有任何问题，但如果在Safari中进行测试，则YouTube视频不会填充div的整个高度。

html标记是：

all

的CSS：

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

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

有关Safari中此大小问题的修复的任何建议吗？

Answer 1

通过将以下内容添加到css

来解决问题

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

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

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

1 个答案: