cancel
Showing results for 
Search instead for 
Did you mean: 

Youtube video embedding scaling issues Magento 2.1.7

Youtube video embedding scaling issues Magento 2.1.7

Hi guys,

 

I have an issue with embedding a video into the homepage of a magento site (2.1.7), https://oilofcloves.com.au

 

Have created a block with the code,

 

<p><iframe style="display: block; margin-left: auto; margin-right: auto;" src="https://www.youtube.com/embed/tDoBrFrZf70" width="560" height="315" frameborder="0" allowfullscreen=""></iframe></p>

 

This code made the video display fine but the top of the page (around the logo etc) and the bottom navigation links became very narrow and didn't responsively fit the screen any more,

 

I have now tried the code with 100% instead for width and height, (currently using this code on the site)

 

<p><iframe style="display: block; margin-left: auto; margin-right: auto;" src="https://www.youtube.com/embed/tDoBrFrZf70" width="100%" height="100%" frameborder="0" allowfullscreen=""></iframe></p>

 

This fixed up the issue at the top and bottom but on a desktop the video looks weird as it will display big black borders on the sides of the video,

 

Any suggestions on the correct code or way to display the video?

 

Cheers!

3 REPLIES

Re: Youtube video embedding scaling issues Magento 2.1.7

Hello @snoopy1966

 

Can you please share a screenshot, i checked your site but no border showing.

Re: Youtube video embedding scaling issues Magento 2.1.7

Cheers Sunil,

 

Here is the issue when the code is set as 100%,

 

Screen Shot 2018-05-04 at 1.18.32 pm.png

 

 

Re: Youtube video embedding scaling issues Magento 2.1.7

Hello @snoopy1966

 

I am not able to see your screenshot.

 

please share via online tool, use crome add on.