Testing out the angular-youtube-embed plugin with Chrome Dev tools' device mode, I wanted to see how the YouTube element would appear.
Here's my code:
<div class="fixed-header my-video">
<div style="padding:0px;">
<youtube-video video-url='vm.videoUrl' player-vars="{controls : 0}"
player-width="'100%'" player-height="'180px;'"></youtube-video>
</div>
</div>
My CSS:
.my-video
{
height:180px;
width:100%;
position:absolute;
background:grey;
color:white;
text-align:center;
padding:0px;
}
and
.fixed-header{
margin-top:43px;
}
When testing on an iPhone5 in device mode, everything looks good. But on an iPhone6, the video appears smaller even though the height is set to 180px. Setting it to around 31% of the viewport height (around 207px) seems to work better for iPhone6.
I tried using '31vh' for the height in my CSS and passed it to the angular-youtube-embed component as well. However, the element's height ended up being 150px instead of 31% of the viewport height.
So, my question is, how can I make the height of the angular-youtube-embed element dynamically adjust to 31% of the viewport size?