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瀏覽器中的嵌入式視頻高度問題

回答

相關問題