All things Shopify and commerce
I Want to change embed youtube video width and height on my product page but it is only changing on my shopify product page section, but didnt show these changes on my website product page.
How can i change the size of embed video on the product page.
I am currently using prestige version 5.
This is the width and height that i am trying with the embed code:
<iframe width="300" height="560" src="https://www.youtube.com/embed/5C1cIy1YLlY?si=t9ineCSGz0jPsPlm" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
Pictures attached:
Solved! Go to the solution
This is an accepted solution.
Hi, please try to update the previous code to this
.ProductMeta__Description .VideoWrapper {
overflow: unset;
height: 560px
}
.ProductMeta__Description .VideoWrapper iframe {
width: 300px;
height: 560px;
left: 50%;
transform: translate(-50%, 0px);
}
- Helpful? Like and Accept solution! or Buy me coffee
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
Could you share your product page link so I can check?
- Helpful? Like and Accept solution! or Buy me coffee
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
CSS of your theme removes width height settings in your code
Also, if it applies your settings, your video will look like this
- Helpful? Like and Accept solution! or Buy me coffee
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
Yes i want video like this, so what should i have to do?
Please add this code to Custom CSS in Online Store > Themes > Customize > Theme settings
.ProductMeta__Description .VideoWrapper {
overflow: unset;
height: 560px
}
.ProductMeta__Description .VideoWrapper iframe {
width: 300px;
height: 560px;
}
- Helpful? Like and Accept solution! or Buy me coffee
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
Alright let me do that.. and autoplay is also not working when i am adding autoplay code in html...can you also tell that how to do this.. so that i will apply combine code in custom CSS for both of my problem
I have applied your code and it works but the video is on left side.. and doesnt come in center like other images...even after aligning it in center in product description.. tell me what can i do.
Kindly replyyyyyy plzzzz
Here is the product page link:
https://thehairshop.pk/products/hair-keratin-treatment-ultra-strength-1
This is an accepted solution.
Hi, please try to update the previous code to this
.ProductMeta__Description .VideoWrapper {
overflow: unset;
height: 560px
}
.ProductMeta__Description .VideoWrapper iframe {
width: 300px;
height: 560px;
left: 50%;
transform: translate(-50%, 0px);
}
- Helpful? Like and Accept solution! or Buy me coffee
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
Thankyouu..........autoplay is also not working when i am adding autoplay code in html...can you also tell that how to do this.. so that i will apply combine code in custom CSS for both of my problem .....can you also help with this?
Starting a B2B store is a big undertaking that requires careful planning and execution. W...
By JasonH Sep 23, 2024By investing 30 minutes of your time, you can unlock the potential for increased sales,...
By Jacqui Sep 11, 2024We appreciate the diverse ways you participate in and engage with the Shopify Communi...
By JasonH Sep 9, 2024