fantasyname

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.

Ahh sorry, I figured it out. Done it with yoast. So this thread can be deleted.

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

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 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.

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.

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.

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.

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.

Maybe you have another idea?

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. ??

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

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.

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.

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?

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.