Search code examples
htmlcssiframemobile

How can I give an iframe video different width and height on mobile & pc browsers?

I have a textbox on my website to make the text easier to read. I have an iframe on my website that was placed outside of my box on mobile devices. So I followed this tutorial to fix that. I'm trying to get my iframe video smaller on pc browsers and the current size in my code for mobile devices. It's too big on pc right now. Is there any way to do this?

HTML code:

<div class="video-container"><iframe src="https://www.youtube.com/embed/c0i88t0Kacs"></iframe>
</div>

CSS code:

.video-container {
position:relative;
padding-bottom:56.25%;
padding-top:30px;
height:0;
overflow:hidden; }

.video-container iframe, .video-container object, .video-container embed {
position:absolute;
top:0;
left:0;
width:100%;
height:100%; }
Solution

  • Just Add Media Query in your Css

    for tablet

    @media only screen and (max-width: 760px) {
.video-container {//set you width and height}

.video-container iframe, .video-container object, .video-container embed 
{//set you width and height }
}

    for Mobile

    @media only screen and (max-width: 480px) {
.video-container {//set you width and height}
.video-container iframe, .video-container object, .video-container embed 
{//set you width and height }

    }