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)
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
This page was cached on 28 Feb 2024 - 01:54.