Log inRegister

Embed video responsively

26 April 2019 - 15:43 | Version 2 | %DBQUERY{ "total_likes>0" topic="Boossy.WdEmbedVideoResponsively" format="| $percntTRANSLATE{\"[quant,_1,like,likes]\" args=\"$expand(total_likes)\"}$percnt" }%
<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
This website is using cookies. More info. That's Fine