YouTube videos not resizing in post when viewed on mobile

Support
#1

Hi,

If you view any post with a video (e.g. https://followtheboat.com/thailand-to-krakatoa/) on a mobile phone, the video is not resizing.

The link example above was inserted into the post in Guttenberg but Guttenberg has been causing us problems so we have installed the Classic Editor Visual mode. This makes no difference, however, as older posts using the old Text mode is doing the same thing. It used to be that you simply pasted the youtube url of the video and it would appear correctly sized within the post, unless I am mistaken.

Any idea how to fix this?

Thanks

#2

Hi @demonboy,

I’ve checked that post on my iPhone 7 and the video looks good on my end:

Can you please tell us which devices you’re using?

Thank you.

#3

Hi,

your screen shot is of the first video. Scroll down to the content in that link and check the embedded video.

#4

Hi @demonboy,

It seems you’ve deleted that embed video:

Could you please add it again?

Thank you.

#5

Sorry. Please see here

https://followtheboat.com/last-visit-to-west-coast-malaysia/

#6

#7

Hi @demonboy,

How are you adding your videos?

Please try to use the classic embedded video element.

Hope that helps

#8

Does this not assume that I am using Cornerstone for my blog posts? I only use cornerstone for pages, not posts.

#9

Hi @demonboy,

It appears you’re using Gutenberg element for the video. Please check this https://theme.co/apex/forum/t/gutenberg-youtube-height-is-too-big/53645/9

The solution is adding these lines to your child theme’s functions.php

// Load default block styles.
add_theme_support( 'wp-block-styles' );

// Add support for responsive embeds.
add_theme_support( 'responsive-embeds' );

Hope this helps.

#10

Hi. No, we stopped using Gutenberg and installed the Classic Editor plugin. We just pasted the youtube link, not embed code. In classic editor this should display the video correctly sized to 16:9.In this case does the code change to functions.php still apply?

#11

Hi @demonboy,

Perhaps it still uses Gutenberg element (not the whole Gutenberg builder) for the video once the link is pasted, that’s because of the code is still have the same one as Gutenberg element as I inspect it. Instead of just pasting the URL, how about adding the embed code through the video shortcode like from here http://demo.theme.co/integrity-1/shortcodes/responsive-video/

Thanks!

#12

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.