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)