Embedded video height issue in Safari browser - html

Question

I have two horizontally aligned responsive divs that are set to be the same height.
The left holds an embedded youtube video, the right a fixed image.
Tested in Chrome there are no issues, but if tested in Safari the youtube video is not filling the full height of the div.
html markup is:
<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">
<img src="https://placehold.it/795x436">
<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%;
}
}
I've set up a fiddle here to demonstrate the issue. https://jsfiddle.net/bgaqfvxm/3/
Any suggestions on a fix for this size issue in Safari?

Answer 1

Issue resolved by adding the following to the css
.first iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Thanks to #Michael Coker for the original css that was used in #media query below 600px