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:
  • 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)
This site is powered by FoswikiCopyright © by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding Foswiki? Send feedback