TL;DR
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/" onload = "document.getElementById('my_id').style.maxHeight = window.innerHeight;" id = "my_id" allowfullscreen></iframe>
The non recommmended way (Adding vh )
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/" style = "max-height: 100vh;" allowfullscreen></iframe>
The core issue is that mobile browsers (I’m looking at you, Chrome and Safari) have a “helpful” feature where the address bar is sometimes visible and sometimes hidden, changing the visible size of the viewport. Rather than adjusting the height of 100vh to be the visible portion of the screen as the viewport height changes, these browsers instead have 100vh set to the height of the browser with address the address bar hidden. The result is that the bottom portion of the screen will be cut off when the address bar is visible, thus defeating the purpose of 100vh to begin with.
A better solution (window.innerheight)
One way to get around this issue is to rely on javascript instead of css. When the page loads, setting the height to window.innerHeight will correctly set the height to the visible portion of the window. If the address bar is visible, then window.innerHeight will be the height of the full screen. If the address bar is hidden, then window.innerHeight will be the height of just the visible portion of the screen, as you’d expect.Source
This works perfectly fine until you do not resize your browser window.
If you resize the window, you need to change height according to new window.innerheight
. This can be achieved by calling a function everytime the window resizes or the element (i.e video) resizes
Full Code
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body onresize = "my_function();">
<main id="content-wrapper" class="container">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/" onload = "my_function();" onresize = "my_function();" id = "embed1" allowfullscreen></iframe>
</div>
</main>
</body>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<script>
function my_function()
{
document.getElementById('embed1').style.maxHeight = window.innerHeight;
}
</script>
When the video will load, onload() event will be fired and the height of the video will be the innerheight of the current window and this will work well for mobile devices in potrait views as well as landscape views