Published on Apr 15, 2021

Responsive Vadootv Player and iframes

Sridhar Katakam

Appsumo currently has a sale going on on Vadootv, 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.

References

https://www.iframe-generator.com/

tagschevron-leftchevron-rightchainangle-rightangle-upangle-downfolder-omagnifiercrossmenuchevron-down