Embed youtube clips not working

edit:
I’ve added position:relative; instead of position:absolute;

.wp-embed-responsive .wp-has-aspect-ratio iframe {	
position:relative;
}

and now the youtube box is showing but not at a normal high.
There is another property that needs editing.

Thanks.

• This reply was modified 3 years, 4 months ago by Max.
• This reply was modified 3 years, 4 months ago by Max.

I have a similar issue. Responsive youtube videos are no longer showing on the website. When I de-select the option to make them responsive they are showing, but are obviousely no longer responsive and impossible to view on smaller devices. Please help Thank you
Peter Schadae

I am having the same issue. Really sucks and I wonder how this issue was overlooked. Seems there is a severe error in quality control. Serious for such a highly priced theme. Please fix this asap.

.wp-embed-responsive .wp-has-aspect-ratio iframe {
position:relative;
}

helps. Video is shown and clickable but the website is a mess.

Same problem here, i have 3 sites using OceanWp. I’ve updated at all, my bad.

Hello All,

Please put the CSS below in Customizing Environment > Custom CSS/JS > CSS Code:

.wp-block-embed.is-type-video.is-provider-youtube {
    max-width: 700px !important;
    margin: auto;
}
.wp-embed-responsive .wp-has-aspect-ratio iframe {
    position: relative;
    height: 397px;
}

Regarding the height of the video, you can change the properties on the CSS above.
__________________________

You can use “Inspect Element” tools on the browser. Please follow the steps explained in this link: https://www.greengeeks.com/tutorials/article/use-the-inspect-element-tool-in-chrome/.

CSS Tutorial: https://www.w3schools.com/css/
CSS Units: https://www.w3schools.com/cssref/css_units.asp
Responsive Sizes: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

@max2k — Thank you for the update and provide CSS.

I hope it helps.
Best Regards

.wp-block-embed.is-type-video.is-provider-youtube {
    max-width: 700px !important;
    margin: auto;
}
.wp-embed-responsive .wp-has-aspect-ratio iframe {
    position: relative;
    height: 397px;
}

This works, but only on pc, how can i solve this on mobile?

@franciscojsh it works on mobile too for me.

@skalanter thank you for the solution. It works ok now.

The video aspect ratio isn’t 16:9 on mobile ??

Hello @franciscojsh,

Could you please share a live URL from your issue?

Best Regards

Ok OceanWp Site here

Hello @franciscojsh,

Thank you for the update,
Please put this CSS instead the previous code:

.wp-block-embed.is-type-video.is-provider-youtube {
    max-width: 833px !important;
    margin: auto;
}

.wp-embed-responsive .wp-has-aspect-ratio iframe {
    position: relative;
    height: 468px;
}

@media(max-width: 480px) {
    .wp-block-embed.is-type-video.is-provider-youtube {max-width: 432px !important;}
    .wp-embed-responsive .wp-has-aspect-ratio iframe {height: 243px;}
}

@media(max-width: 414px) {
    .wp-block-embed.is-type-video.is-provider-youtube {max-width: 337px !important;}
    .wp-embed-responsive .wp-has-aspect-ratio iframe {height: 243px;}
}

@media(max-width: 320px) {
    .wp-block-embed.is-type-video.is-provider-youtube {max-width: 288px !important;}
    .wp-embed-responsive .wp-has-aspect-ratio iframe {height: 182px;}
}

Hope it helps.
Best Regards,

Thanks @shahin it worked very well for my case.