So i followed some guide and got done till here:
this is the code i used:
however i dont like how its showing and i would like to show in full 1920*1080 resolution like the one showed below:
Please help
Website URL:
Topic summary
A user successfully embedded a YouTube video on their product page using an iframe but was dissatisfied with the display dimensions. They wanted the video to appear in full 1920×1080 resolution instead of the default 315×560 size.
Solution provided:
- Add custom CSS code to the theme’s stylesheet (Assets/theme.css)
- The CSS targets the product description iframe and applies an automatic height with a 9:16 aspect ratio
- This resolved the display issue
Follow-up question:
The user asked if the video could autoplay on hover, but this feature is not possible when embedding videos via iframe.
Status: Resolved - the original display issue was fixed, though the autoplay-on-hover feature cannot be implemented with the current iframe method.
Hi @saadrafi ,
May I suggest to update code these steps:
- Go to Store Online-> theme → edit code
- Assets/theme.css
- Add code below to end of file
.product-block.product-single__description iframe {
height: auto!important;
aspect-ratio: 9/16;
}
Thankyou, it worked.
can the video be auto played when hovered?
Hi,
Sorry. It’s impossible when you use an iframe to embed video.