Split: Issue with YouTube & Vimeo Embeds

[Yvonne]

YouTube videos stretch across the entire width of the page, despite the (smaller) sizes set. The theme does not respond.

[scrambler]

If that is a report of a problem, can you be more specific and provide a link to the page

[Yvonne]

I cannot place any link because my post (application) is rejected or deleted automatically here

[Yvonne]

http://         online.palac.szczecin.pl/online/2020/04/10/pracownia-dodeka-swiatecznie/

[scrambler]

Can you provide more details, like how you are inserting the video and what you are trying to achieve?

 

[hkp]

Hi Yvonne,

As I understand, it is a WP default WP to make centrally positioned video full width.  Not so for left of right positioned.

I do not use blocks, but copy and paste into posts.

The solution I worked out here on this forum is to use:

‘ < div style=”max-width: 446px;display:block;margin:0 auto;margin-bottom: 15px; “><iframe src=”h_t_t_p_s://www.youtube.com/embed/xxxxxxxx” width=”446″ height=”250″ allowfullscreen=”allowfullscreen”></iframe> < /div > ‘

(Please remove __ underscore and < div spaces to test.)

It works with Vimeo also.  All I need to do is paste in the Vimeo URL or YT video ref.

With old YT videos the aspect ratio is not 446×250 always so you need to change height or width to suit page appearance and video shape.

Regards

 

 

[Yvonne]

Regardless of the size of the video window, I always have the full width of the page. I want the window size I set !!!!!

 

@hkp thank you very much. I will test it tomorrow and I will let you know.

 

[scrambler]

You are not telling us how you are inserting the video, so hard to tell.

But the manual way above will work as would normally the weaver shortcode with a percentage.

[Yvonne]

@scrambler I insert using the Youtube block built into wordpress

 

@hkp window adjustment is successful, but then Youtube resets the connection to its website and does not display the movie

[scrambler]

Well, the YouTube block does not have any options to limit the width, so that was a predictable outcome 🙂

If using the YouTube block, you can limit the width by using the method below

In the block editor, once you added the video and updated the editing page, use the Advanced > Additional CSS box to add your own class to the existing list like myvideo1, and save the settings (update)

Do make sure to put a space between the class you add and the other ones.

Then you can limit the width of the video by adding the rule below to the theme Global Custom CSS Rule box

.myvideo1 {max-width:500px;}

 

“ but then Youtube resets the connection to its website and does not display the movie“

Can you elaborate on what you mean by that, and does it only happen when using the manual HTML insertion, or does it also happens with the WP YouTube block?

[Yvonne]

“ but then Youtube resets the connection to its website and does not display the movie“

Can you elaborate on what you mean by that, and does it only happen when using the manual HTML insertion, or does it also happens with the WP YouTube block?

when set manually HTML

[scrambler]

Then use the youtube block and the method I gave you

[Author]

Posts