Log inRegister
Embed video responsively
<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)
Copyright © by the contributing authors. All material on this collaboration platform is the property of the contributing authors. Ideas, requests, problems regarding Foswiki? Send feedback
This page was cached on 08 May 2023 - 04:21.