Youtube Videos (mobile version)

Ok, i tried the second one, but that didn’t solve the problem. the sizes of the videos arent responsive in the mobile/tablet-version. Its very important for me that this works, cause videos are essential for my site.

• This reply was modified 3 years, 8 months ago by fantasyname.

If you’ve deactivated the Classic Editor, then make sure to remove the video link from the post and re-add it as a video block. I am using this code on my test site right now with a video block and it works as intended like the previous screenshot I share here.

Yes, I deactivated classic editor and did it like you said.

But don’t you see the black bars at the bottom and top in 16:9-videos?
They don’t go away. ??

• This reply was modified 3 years, 8 months ago by fantasyname.
• This reply was modified 3 years, 8 months ago by fantasyname.

This snippet I shared doesn’t cause these issues:

@media all and (max-width: 699px) {

  .wp-block-embed.is-type-video {
    position: relative;
    left: -10%;
    width: 120%;
  }
}

This code isn’t going to remove black bars from the embed if they’re added by Youtube, but it also won’t add black bars to a video that doesn’t have them when viewed on Youtube.com.

I can’t confirm that, I already deleted the other css-codes to check if in the other codes is an issue. The black bars are there because the size of the video isn’t the right one in mobile/tablet, it has to be smaller at the top and bottom. Or is this normal?

Thanks again for your help, appreciate this!!

• This reply was modified 3 years, 8 months ago by fantasyname.
• This reply was modified 3 years, 8 months ago by fantasyname.

Founder runs a script called FitVids that makes video embeds responsive, but it scales them using their own aspect ratio so it doesn’t normally cause this type of issue. It could be that the video itself includes letterboxing, but I would need to see the site firsthand to really figure this out.

I noticed that the issue is only, when I post the videos on the normal page sites. In posts, there is no problem and the videos are responsive as you descriped.

The code is:

<center><p class=”video”><iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/EXAMPLE&#8221; title=”YouTube video player” frameborder=”0″ allow=”accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe></center></p>

This is the CSS i use:

@media all and (max-width: 699px) {

  .post-content .video {
    position: relative;
    left: -5%;
    width: 110%;
    max-width: 110%;
  }
}

(I work with the classic editor again)

• This reply was modified 3 years, 8 months ago by fantasyname.
• This reply was modified 3 years, 8 months ago by fantasyname.
• This reply was modified 3 years, 8 months ago by fantasyname.

I’m sorry but I’m not sure. It should be the same for posts and pages, so maybe there is a Javascript error coming from a plugin that is messing with the post pages. I’d have to view a live example to know for sure.

Hm, strange. Unfortunately the site isn’t online yet. I deactivated elementor (header & footer) f.e., but the issue was still there. classic editor, too – that can’t be the problem.

other plug-ins I use are GDPR Cookie Compliance, super socializer, yoast, WP Reading Progress. I guess nothing special?

• This reply was modified 3 years, 8 months ago by fantasyname.