[Dundy]

Hi,

When I embed Youtube videos into the portfolio pages, the height and width settings of the code are ignored and it comes up with full width.

Please take a look at this page:

https://andraslens.com/portfolio/videography/

And this is the source:

( I have removed the < and > signs in case it would cause a problem while posting )

iframe src=”https://www.youtube.com/embed/dCxCKMfRUY4&#8243; width=”560″ height=”315″ frameborder=”0″ allowfullscreen=”allowfullscreen”></iframe

As you can see, the 560×315 is disregarded. I have tried the [embed] function and the WP’s built-in Youtube embedding as well. The result is always the same, the template seems to overwrite the size and makes it full-width.

Could you please tell me what I can do to have the portfolio pages display embedded videos in the actual size set in the codes?

Thanks in advance!

[serkan]

Hi @Dundy
You can try to use these custom css codes

.fluid-width-video-wrapper iframe { width: auto; height: auto; }
.fluid-width-video-wrapper { padding-top: 13% !important; }

Thanks

[Dundy]

Hi @serkan,

Thank you. Adding those lines kept the videos at full-width and reduced the height only:

https://imgur.com/a/BdIgSR9

I tried replacing “auto” with actual width and height but doesn’t affect it.

When I actually refresh my browser, I can see that first the frames load in the desired size set by the iframe parameters and then next second it goes full width.

Thank you for the support.

[serkan]

Hi,
You can change the custom css codes like these;

.fluid-width-video-wrapper { max-width: 768px; }
.fluid-width-video-wrapper { padding-top: 26% !important; }

Thanks

[Dundy]

Great, thanks. It displays fine on desktop but on mobile, the height is not proportionate:

https://imgur.com/a/7iiNgPu

I am using this code:

iframe src=”https://www.youtube.com/embed/dCxCKMfRUY4&#8243; width=”560″ height=”315″ frameborder=”0″ allowfullscreen=”allowfullscreen”></iframe

with this CSS:

.fluid-width-video-wrapper { max-width: 768px; }
.fluid-width-video-wrapper { padding-top: 26% !important; }

Note, if I change the width in the iframe code to 768px it becomes full screen width again and the height goes back to 315 – similar to the screenshot I sent you previously:

https://imgur.com/a/BdIgSR9

Thank you very much for your help.

[serkan]

Hi,
Would it be more advantageous for you if we limit the structure of the single-portfolio page instead of destroying the structure of Youtube?

.single-portfolio .layout-full {  width: 55%; }

Thanks