Bootstrap embed responsive is not formatted well for mobile browser in landscape

user_5715663 0
Viewed 1042

I am using the latest version of bootstrap and included the responsive embed for my youtube videos with the bootstrap container. The container sizes the video well within the constraints on the container however, the video looks very large while in landscape, taking up too much space. I think this is becuase the bootstrap container class changes its width based on media-queries which works fine for mobile devices in portrait but not well for mobile devices in landscape. Here is the standard code that I am using:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main id="content-wrapper" class="container">
  <div class="embed-responsive embed-responsive-16by9">
    <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/" allowfullscreen></iframe>
  </div>
</main>
<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>

Is there any way that I can fix the container so that it improves the formatting of the video in landscape?

bootstrap-4 containers iframe css html
1 Answers

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

user_116051000
Related