[SOLVED] Responsive youtube video in product description, it's possible?

[DARKF3D3]

I've just embedded a youtube video on a product page, the problem is that width is fixed and it doesn't adapt to the page width. There's no way to have responsive youtube video?

Edited October 23, 2014 by DARKF3D3 (see edit history)

[zeezuiper]

On http://embedresponsively.com/ I found a code generator for various media sources such as youtube. However, you have to put the CSS part of the code to the product.css in your themes\<theme name>\css folder:

.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; height: auto; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

The other part can be placed in the description:

<div class='embed-container'><iframe src='http://www.youtube.com/embed/_OQRXv43DbQ' frameborder='0' allowfullscreen></iframe></div>

Edited October 19, 2014 by zeezuiper (see edit history)

[Amine_MAjdi]

Hi 

 

Can you please explane me how can you add a youtube video in description product page, because when I add the link of the video, I have a error message.

 

Le champ description_short (Français (French)) est invalide.

[DARKF3D3]

You have to enable iframe from B.O. settings.

[Amine_MAjdi]

it work, I just do it 

Thank you for all 

[JaroslavH]

Hi all,

 

I have a problem with this modification. 

 

If I do insert this: 

<div class='embed-container'><iframe src='http://www.youtube.com/embed/_OQRXv43DbQ' frameborder='0' allowfullscreen></iframe></div>

everything is OK.

 

If I do insert code to product.css

.embed-container { 
position: relative; 
padding-bottom: 56.25%; 
height: 0; 
overflow: hidden; 
max-width: 100%; 
height: auto; } 

.embed-container iframe, .embed-container object, .embed-container embed { 
position: absolute; 
top: 0; left: 0; 
width: 100%; 
height: 100%; }

distorts my page with a description of the product. 

Before and after the description of there is a gap as large as video (see attachment)

 

Any idea how to modify the css code?

 

Thanks

 

Jaroslav

 

Edited November 8, 2014 by JaroslavH (see edit history)

[tekcenter]

this works ok

but there is one thing that is not working properly, and that is "allow full screen"

the code "allowfullscreen" disapears after we save the html.

any idea?

[abmagic]

You have to enable iframe from B.O. settings.

Hi, where do you enable the B.O.Settings?  I have got the same problem with embedding Youtube video on product page.

[MarketingPro]

tekcenter, I had the same problem with allowfullscreen and I solved it by deactivating the HTML Purifier option in Preferences > General (using PS 1.6)