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/

Need help implementing a tutorial in your site or want to hire me for custom work?

HIRE ME

Find the article helpful and wish to donate?

DONATE

Comments

You need to be logged in to view and post comments.
Not a member yet? Join here.
magnifiercross
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: