Vadootv is a video hosting solution with customizable player for those looking to host videos on their own without the third-party branding, related videos, bandwidth limits and recurring costs involved with regular video hosting companies like YouTube and Vimeo.
The generated HTML embed code out of the box is like this:
<div><div style="left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.25%;"><figure style="left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.25%; margin-block-end: 0; margin-block-start: 0; margin-inline-start: 0; margin-inline-end: 0;" ><iframe src="https://api.vadoo.tv/iframe_test?id=yvs9M7b0U8iLHru2mEJtx3UFZrO4owgJ" scrolling="no" style="border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute; overflow:hidden; border-radius: 5px;" allowfullscreen="1"></iframe></figure></div></div>If you are someone like me that prefers only as little HTML markup as is needed, follow along to optimize the above.
We can strip off all the code surrounding the iframe except the outer-most div so we can assign it a class for targeting via CSS.
Ex.:
<div class="iframe-container"><iframe src="https://api.vadoo.tv/iframe_test?id=yvs9M7b0U8iLHru2mEJtx3UFZrO4owgJ" scrolling="no" style="border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute; overflow:hidden; border-radius: 5px;" allowfullscreen="1"></iframe></div>Then add the following CSS:
/* Responsive iframes incl. Vadootv Player */
:root {
--aspect-ratio: 16/9;
}
.iframe-container {
position: relative;
width: 100%;
margin-bottom: 40px;
}
.iframe-container::before {
content: "";
display: block;
padding-bottom: calc(100% / (var(--aspect-ratio)));
}
.iframe-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}Live Demo:
This approach works to make any iframe responsive, not just Vadootv’s.