How do I make my embedded YouTube, Vimeo video responsive?
If you use code provided by Youtube or Vimeo, when inserted them into your articles, your pages in Shopify, The videos will not responsive for mobile or tablet.
This article will help you make your Vimeo video or Youtube video responsive.
The first, you need add bellow code for CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | .embed-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; } .embed-container iframe{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; } |
OK. Now you need open the files have the code for retrieve content and replace
1 | {{ article.content }} |
with
1 | {{ article.content | replace:'<iframe','<div class="embed-container"><iframe' | replace:'</iframe>','</iframe></div>' }} |
The code example above is for article in blog. If you use for pages or description (collections, products) you replace article.content with page.content, product.description or collection.description.
Done! Good luck for you!
Huynh Mai Anh Kiet
