ztest

If you are making your own themes, you may want to handle specifically embedded objects to be more responsive. Usually, I used Bootstrap but it is not enough. I need to handle embedded objects like images, videos and the like. Here is a snippet of a DIV container to do it:


.responsive-container {
position: relative;
width: 100%;
padding-bottom: 56.25%; /* 16:9 aspect ratio */
overflow: hidden;
background: #000; /* optional */
border-radius: .5rem; /* optional rounded corners */
}
.responsive-container iframe,
.responsive-container img,
.responsive-container video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
object-fit: cover; /* makes image/video scale nicely */
}

You may want to add this:

.ratio-16x9 { padding-bottom: 56.25%; }
.ratio-4x3 { padding-bottom: 75%; }
.ratio-1x1 { padding-bottom: 100%; }

Usage in your HTML

<div class="responsive-container ratio-4x3">
<video src="example.mp4" controls="controls" width="300" height="150"></video>
</div>


Sample below: