2

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?

nenur
  • 340
  • 2
  • 6
  • 34
  • post a screenshot. I just recreated it and it looks just fine to me. – ZombieChowder May 18 '20 at 21:19
  • Due to width-media query, you need to scroll videos in landscape view because it is taking lot of space in width, is this what you meant? – ajinzrathod May 19 '20 at 09:26
  • @ZombieChowder if you run the code snippet without being in full-page mode, you can clearly see that you have to scroll the entire iframe because it is clearly too large. This is because the bootstrap container class resizes based on the width-media query and does not account for device height. So when a phone is in landscape you have to scroll the entire iframe. I want the iframe to shrink in size so that the full iframe is displayed without scrolling when the user changes screen orientation to landscape. The container class does not account for this edge case. – nenur May 19 '20 at 16:53
  • @AjinkyaRathod yes, that is correct. I want to correct this issue. It has to do with the height of the device because the Bootstrap container class accounts for the width of the window but doesn't account for changes in height. Scrolling wouldn't be necessary if the device height was bigger but the device changes media-height when the user changes screen-orientation to landscape. It only matters for mobile/tablet devices. – nenur May 19 '20 at 16:56
  • Maybe wrap it on a row and col and limit the size of the column on bigger screen like with col-lg-6 – Turqueso May 20 '20 at 21:16

1 Answers1

3

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

Community
  • 1
  • 1
ajinzrathod
  • 426
  • 1
  • 16
  • This worked for me thanks! I do have a navbar at the top of the window and a footer at the bottom so I had to subtract their `outerHeights` from `window.innerHeight` minus an additional 30px to make the video fit well. I also have the video's `min-width: 100%` so that it would be responsive and fit within the container's and column's width for any screen size. I also need to change the video's width for this case too. Any simple idea's on how to do that for only mobile devices in landscape? – nenur May 21 '20 at 04:44
  • Also, one thing that I noticed is that the max-height for all videos isn't always consistent as I change screen orientation, so sometimes it works and other times it doesn't. Here is what I did: `$(".yvideo").each(function(index) { let video = $(".yvideo").get(index); video.style.maxHeight = window.innerHeight - $("#top_navbar").outerHeight(true) - $("#footer").outerHeight(true) - 30; });` – nenur May 21 '20 at 04:49
  • 1
    How to do that for only mobile devices in landscape? `function my_function() { if (window.matchMedia("(orientation: landscape)").matches && window.innerWidth <580) { document.getElementById('embed1').style.maxHeight = window.innerHeight; }} ` This will do the job, but if you want to detect mobile devices, refer [this](https://stackoverflow.com/questions/11381673/detecting-a-mobile-browser) The disadvantage is that, there is no way for testing this bcoz if you resize the browser in developer options, the browser will NOT detect the device as mobile device. – ajinzrathod May 21 '20 at 09:36