Thread Starter
Max
(@max2k)
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 4 years, 12 months ago by
Max.
-
This reply was modified 4 years, 12 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?
Thread Starter
Max
(@max2k)
@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
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.
