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

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

在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中修复此大小问题的任何建议吗？

来源

2017-05-28 Steve Price

@迈克尔焦化@media查询中使用原来的CSS解决，你会看到我解决了在YT视频上阻止点击播放的蒙版。 –

问题通过添加以下的CSS

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

感谢@迈克尔焦化为在下面600px的

来源

2017-05-28 21:39:50

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

回答

相关问题