How to have video in Iframe stay 100% size on responsive mobile but not on desktop-CodePudding

I want the video to be responsive on mobile but on desktop its massive. Is there a way to override this so it works on mobile but is to a set pixel on desktop?

 <div id="container-fluid"
 style="padding-bottom:56.25%; position:relative; display:block; width: 100%">
 <iframe id="ViostreamIframe" width="100%" height="100%" src="memories/bobby.mp4" frameborder="0" allowfullscreen="no" style="position:absolute; top:0; left: 0"></iframe>

CodePudding user response：

Are you familiar with media query? you can use media query to make it behave differently on mobile and desktop.

Here is a link to learn more (How do you write media queries in CSS for Responsive design?): https://www.lambdatest.com/blog/css-media-queries-for-responsive-design/

example of code: (add this to your CSS, not the HTML)

@media only screen and (min-width: 600px) {
    <iframe id="ViostreamIframe" width="insert your size in px" height="insert your size in px" src="memories/bobby.mp4" frameborder="0" allowfullscreen="no" style="position:absolute; top:0; left: 0"></iframe>
}

CodePudding user response：

On modern browsers you can use CSS aspect-ratio to get the 16/9 aspect ratio rather than need to use padding.

You can then set the maximum width that you are prepared for the video to go to.

This snippet sets the max-width at 600px just as a demonstration:

body {
  width 100vw;
}

<div id="container-fluid" style="aspect-ratio: 16 / 9; position:relative; display:block; width: 100%; max-width: 600px;">
  <iframe id="ViostreamIframe" width="100%" height="100%" src="memories/bobby.mp4" frameborder="0" allowfullscreen="no" style="position:absolute; top:0; left: 0; background-color: gray;"></iframe>
</div>

Note: as there is no actual video in the example the background is set to gray so it can be seen.