Having issues making an embedded youtube responsive but not so huge on my desktop display

I am trying to make my responsive embedded youtube video not appear so large on a regular desktop display. It looks fine in mobile, but when trying to adjust the size to make it look good on desktop it ruins the responsive on mobile.

I've tried adjusting the width / height % in css which allows me to resize in desktop but ruins the responsiveness in mobile.

.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%;
}
<div class="video-container">
<iframe width="853" height="480" src="https://www.youtube.com/embed/z9Ul9ccDOqE" frameborder="0" allowfullscreen>
</iframe>
</div>

I am trying to get my embedded video to look like a normal sized video but yet responsive. Currently it takes up the entire screen.

issue here is a photo of the desktop display.

1 answer

  • answered 2019-10-15 17:16 Laif

    Use the max-width CSS property to set a hard limit for where you want the video to stop expanding. That way, if the user is using something such as an ultrawide monitor, your content will cap where you want it to.

    Here's an example:

    .expandable{
        width: 80%
        max-width: 1200px;
    }