Youtube Videos (mobile version)

Try out this CSS:

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

That’s going to target any videos embedded in posts and stretch them to the full width of the screen like the Featured Images.

Hi,

sorry, but that doesn’t change anything :/ I put the whole css-codes from the customizer in CSS Lint and there was no syntax error or something like that.

I also deleted the Cache.

Is this streching-thing with the text-content possible, too?

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

Hmm it works well when I use it on a test site. Here’s how it should look: https://share.getcloudapp.com/NQuolKLw

The post content should already be pretty close to the edge of the screen, but you could reduce the spacing on the sides further with the following CSS:

@media all and (max-width: 43.75em) {
	
	.main {
	  padding: 0 8px;
  }
}

Strange, the thing with the video just doesnt work. The screenshot looks good, thats exactly want I want, too.

Sorry, that’s a misunderstanding: The second code should only work for the content on the pages, the homepage is fine as it is.

So instead of .main I use another CSS-selector then?

youtube video: Maybe it doesnt work because we made some changes in the .php-files before? In other browsers the effect isn’t there, too. Don’t know what to do.

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

Actually, if you’re using the Classic Editor plugin, then that could be a reason for the CSS to not apply to the videos. The following CSS might work well instead:

.post-content iframe {
  position: relative;
  left: -10%;
  width: 120%;
}

Yes, i am using the classic editor. When i put the latest code in the css, the video is just more on the left.

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

I turned off the classic editor, doesnt change anything. What do you do different?

This one know works:

@media all and (max-width: 43.75em) {

.main {
padding: 0 8px;
}
}

There was another css-rule that I had to delete.

But the youtube-thing, still no idea. ??

Maybe you have another idea?

The original code snippet will work if the video is added as a block because that code targets any video blocks.

Since the video moved to the left with the second code snippet, I think there must be a max-width property that needs to be overridden. Try this instead:

.post-content iframe {
  position: relative;
  left: -10%;
  width: 120%;
  max-width: 120%;
}

Yes, but then it doesnt look good on the desktop-version, its not in the right format then.

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

Okay this version of the code will limit it to smaller screens only:

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

  .post-content iframe {
    position: relative;
    left: -10%;
    width: 120%;
    max-width: 120%;
  }
}

That works with the desktop-version, thx. But how can I get rid of the black bars in the video in the mobile and tablet version, so that the size fits with 16:9-content?

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

The classic editor inserts the videos in a way that you can’t make them responsive and resize them without affecting the aspect ratio unless you also add a class to the parent HTML element.

You can open the “Text” view in the classic editor and wrap the video with a paragraph element with the class name “video” to make this work:

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

  .post-content .video {
    position: relative;
    left: -10%;
    width: 120%;
    max-width: 120%;
  }
}

Otherwise, if you use the Gutenberg editor, you can just insert a video block and use this snippet:

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

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

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