Resizing Youtube videos for blog in mobile (Theme taste 2.0)

RitaCh · ‎02-07-2023

One of our blog posts has a YouTube embed. Looks fine on the web, but it looks terrible on mobile since it won't resize to screen width. I've searched around, but none of the suggestions work. You can see the issue on mobile here bit.ly/3jxK76Y

StoreWatchers · ‎02-07-2023

Hello @RitaCh,

Greetings from the Store Watchers Support Team! Happy to help you today.

Go to Online Store -> Actions -> Edit code. Then find theme.liquid.

In your theme.liquid file, please paste the code below before the </head> tag.

<style>
@media only screen and (max-width:768px){
  .article-template iframe{
    width: 100%!important;
    height: 100%!important;
  }
}
</style>

Let me know if need further assistance

Regards,
Store Watchers Support Team

StoreWatchers - Automate testing for your Shopify store in seconds

If you find my reply helpful, please hit Like and Mark as Solution
Visit us: App Store | Website | FAQs

View solution in original post

AfterDarkGrafx · ‎02-07-2023

See this: https://dev.to/deammer/embed-responsive-youtube-videos-in-2021-5dkh

James Byrne, Owner, Information Architect (USMC VET)
After Dark Grafx - Since 1992
"We Work After Dark, So You Don't Have To!"
https://www.afterdarkgrafx.com

Services: Website Design, Mobile App Development (iOS, Android, Windows), Ecommerce, Magento, Shopify, Miva, BigCommerce, Search Engine Optimization, Wordpress, Hosting, Graphic Design, Merchant Accounts, Consulting and all things web related!

Certified Partner/Developer/Affiliates: Shopify, Google Integrator, Wordpress, Zoho, AuthorizeNet, Geotrust and a Member of the San Diego Regional Chamber of Commerce, Veteran Owned Businesses, Veteran's In Business Network.

I also build custom apps for Shopify!

StoreWatchers · ‎02-07-2023