How can I put Youtube Shorts in product page description? (Size Issues)

Technical Q&A
, ,
1

In Admin, shorts work fine,
But It is not a shorts size in the real product page (and preview also)
Do I need to edit CSS code also?

  1. admin description page is working well

khalidpark_0-1723193843062.png
khalidpark_0-1723193843062.png637×423 137 KB

  1. But real product page is not shorts size like below

khalidpark_1-1723193882687.png
khalidpark_1-1723193882687.png423×283 74.8 KB

Please help me

thank you

2

Hi,

You can use iframe or responsive embed wrapper

Add HTML and CSS for responsive embed wrapper

Code example for html


    <iframe src="https://www.youtube.com/embed/VIDEO_ID_HERE" frameborder="0" allowfullscreen=""></iframe>

Css example

.video-container {
    position: relative;
    padding-bottom: 56.25%; /* Aspect ratio for 16:9 videos */
    height: 0;
    overflow: hidden;
    max-width: 100%;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
3

Sorry unfortunately, your code is also not working

still youtube shorts video size is Horizontal version

I want to this video as vertical version like shorts size

could you help me?

4

For portrait videos you’d need to amend the padding-bottom value.

Try

padding-bottom: 177.78%; /* Aspect ratio for portrait 16:9 videos */

It would also be helpful to see the actual page – it’s possible that other existing CSS rules affect your youtube iframes.