Embed video responsively

With an iframe (oldskool)

<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='https://www.youtube.com/embed//video-id' frameborder='0' allowfullscreen></iframe></div>

The trick is: padding-bottom: 56.25%, which is the width-height ratio of 16:9 videos (9/16*100):

• 1280*720
• 1366*768 (~ 56.22%)
• 1600*900 (HD+)
• 1920*1080 (Full HD, 1080p)
• 2560*1440 (Quad HD, 1440p, WQHD, Wide QXGA)
• 3840*2160 (4K, UHD)
• 5120*2880 (5K)

Example with autoplay & mute:

<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src="https://www.youtube.com/embed/RSSnzglGGag?autoplay=1&mute=1"></iframe></div>

sources: YouTube player API: reference for iframe embeds and player demo

With a video tag

• Much more simple: no calculation needed
• Also usable for self hosted videos

Example

<video style="max-width: 100%; height: auto;" muted playsinline autoplay loop>
    <source src="yourvideo.mp4" type="video/mp4">
</video>

Compress video, but keep resolution

Enkele geprobeerd:

• videocandy.com: watermerk + kwaliteitsverlies (340MB > 7MB)
• veed.io: kwaliteitsverlies (340MB > 31MB)
• compress2go.com: ideaal, veel compacter en geen kwaliteitsverlies (340MB > 53MB)
• freeconvert.com: te weinig winst (340MB > 319MB)

---

• Credits: Autoplay in a self-hosted video
• Source: W3schools HTML video tag: with an overview of all attributes