Archived topic
youTube vids no longer responsive on mobile
5 replies · Started by Drew on May 6, 2022
The video at the bottom of this page, https://emberlight.org/, is being rendered in a section with the video share link pasted into the content as plain text. This has always rendered just fine with the following:
I'm using the snippet:
function alx_embed_html( $html ) {
return '<div class="video-container">' . $html . '</div>';
}
add_filter( 'embed_oembed_html', 'alx_embed_html', 10, 3 );
add_filter( 'video_embed_html', 'alx_embed_html' );and CSS:
.video-container {
position: relative !important;
padding-bottom: 56.25% !important;
height: 0 !important;
overflow: hidden !important;
margin-bottom: 50px !important;
}
.video-container iframe, .video-container object, .video-container embed, .video-container video {
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
}This has worked for years but I started having issues as of late. Blocks aren't an issue (my clients still HATE HATE HATE them). Has the snippet or CSS updated recently?
Hi there,
the issue arises when the iframe has width and height attributes.
The CSS you share above is inside an @media only screen and (min-width: 768px) query so its only fixing the desktop.
Personally this is my go to for adding responsive embeds:
The CSS and HTML it provides has always worked for me.
T hanks for the resource David, I wish I could rely on clients being willing or remembering to use it but that's never going to happen. But that's the other oddity here, there isn't any CSS in the system (customizer or per page) with a media query that wraps the .video-container class.
I copied out your CSS to have a closer look, see the @media only screen and (min-width: 768px) in this part of the code:
.... CSS before
.vem-single-event-content a.purchase-tickets-link:hover {
background-color: var(--accent);
color: var(--contrast-3);
}
@media only screen and (min-width: 768px) {
.vem-single-event-thumbnail.vem-full-image {
float: right;
width: 45%;
margin-left: 50px;
}
.vem-single-event-run-dates {
font-size: 2rem;
}
... CSS after
That @media doesn't have a closing bracket, so effectively every line of CSS after it is inside it.
🤦♂️ good catch David, many thanks and totally my bad. You guys really need a mandatory tip jar for pointing those things out (#notjoking)
No problems - happy to be of help, even if it is just providing another pair of eyes.
