Premium support

Please log in to post in these forums. If you didn't create an account when you purchased, please contact us.

Free support

If you haven't purchased GP Premium, support for the free theme can be found on WordPress.org.

[Resolved] YouTube videos showing correct size on mobile

Home Forums Support YouTube videos showing correct size on mobile

This topic contains 26 replies, has 4 voices, and was last updated by  Tom 1 week ago.

Viewing 15 posts - 1 through 15 (of 27 total)
  • Author
    Posts
  • #469118

    So, I just updated to GP coming from the Pro Photo blog theme (photographer). and I have TONS of YouTube videos embedded on my site everywhere. Before I switched over to this theme I had no issues with them showing on mobile. They looked perfect. Now, they are not automatically scaling down and look bad.

    I know there is a way to make them all “snap back” so that they will look good on Mobile. I know this because, this happened before when Pro Photo theme was updated from 5 to 6. I sent them an email and they did something to the site on the back end that then make them all look okay on mobile again. Obviously I am no longer with them, and hoping this can be done with GP as well 🙂

    Thank you so very much!
    Travis

    GeneratePress 2.0.1
    #469351

    Leo
    Staff

    Hi there,

    You will need to do this: https://docs.generatepress.com/article/responsive-videos/

    Want to help support GP? Please consider leaving us a review!
    https://wordpress.org/support/theme/generatepress/reviews

    #469399

    Hey Leo! Right on! Thanks for that!

    It looks like this will require going, and editing every post with a video to add the HTML.

    There must be another way to do it, without having to do that?

    I’m going to try to reach out to my old support company with Pro Photo and see if they will tell me how they did it. Because they did it for me on the back end, and did not need to make any edits to any of the embed code etc. (that would take days to do LOL).

    Ill post back if I can get the answer!

    #469517

    Leo
    Staff

    I would assume they have some sort of video widget that wrap the div around your video autocratically which isn’t ideal -As you can see, when you switch themes that’s no longer there.

    Doing it using the way in the article ensures that your HTML and CSS will always be there even if you switch themes.

    Want to help support GP? Please consider leaving us a review!
    https://wordpress.org/support/theme/generatepress/reviews

    #469636

    That makes sense. So, I would need to use this wrap each time I add a new video then correct?

    #469716

    Leo
    Staff

    Yup that’s correct.

    Want to help support GP? Please consider leaving us a review!
    https://wordpress.org/support/theme/generatepress/reviews

    #469746

    Travis, Leo,

    Here is a solution that is “automagic” with no need to add the HTML wrapper on each vid 🙂

    https://generatepress.com/forums/topic/lightweight-grid-columns-youtube-height-values-not-set-automatically/#post-455249

    Cheers!
    Lyle

    http://snifflevalve.com
    Tutorials and tips for GeneratePress, WP Show Posts, WordPress and Elementor

    #469749

    Leo
    Staff

    Ahh thanks Lyle!

    Maybe I’ll add to the docs page 🙂

    Want to help support GP? Please consider leaving us a review!
    https://wordpress.org/support/theme/generatepress/reviews

    #469757

    Wow! Cool!

    I know where to put the CSS code.. where does the snip it code go on my site?

    #469766

    I use the Code Snippets plugin.

    https://docs.generatepress.com/article/adding-php/

    http://snifflevalve.com
    Tutorials and tips for GeneratePress, WP Show Posts, WordPress and Elementor

    #469912

    Okay perfect!! I will take a look at that plugin!

    I finally got a response from the support team from my old theme (Pro Photo). They are the ones that did it for me last time (on a different theme) I wanted to post this here and see what you think of it?

    Okay yes, what I had done at that time was I added some Custom Javascript and CSS to your site, to make the videos on the site all responsive. The Javascript I had placed in the Custom Javascript area under “ProPhoto > Settings > Advanced > Custom Code” was:

    jQuery( document ).ready( function() {
    // wrap iframes
    jQuery( ‘.article-content’ ).each(function() {
    jQuery( this ).find( ‘iframe[src*=”youtube.com/embed”], iframe[src*=”vimeo.com/video/”]’ ).each(function() {
    jQuery( this ).wrap( ‘

    ‘ );
    this.removeAttribute( ‘width’ );
    this.removeAttribute( ‘height’ );
    });
    // wrap WordPress videos
    jQuery( ‘.article-content’ ).find( ‘.wp-video’ ).each(function() {
    this.removeAttribute( ‘style’ );
    });
    });
    });

    And then the CSS, which I placed in the Custom CSS area under “ProPhoto > Settings > Advanced > Custom Code” was:

    /** BEGIN responsive video embeds **/
    .embed-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
    }
    .embed-container iframe,
    .embed-container object,
    .embed-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    }
    /** END responsive video embeds **/

    So basically that code would find all videos and wrap them in a special tag, which the CSS would then make responsive. Not sure if/how that can be done in another theme, but if there are places to added custom code like this, you could try that.

    #469925

    Another update.. I just installed that Snipit plugin, and then I added the code:

    function alx_embed_html( $html ) {
    return ‘

    ‘ . $html . ‘

    ‘;
    }

    add_filter( ’embed_oembed_html’, ‘alx_embed_html’, 10, 3 );
    add_filter( ‘video_embed_html’, ‘alx_embed_html’ );

    and then I went to CSS and I added in:

    .video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow:
    hidden;
    }
    .video-container iframe, .video-container object, .video-container embed, .video-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    }

    But, nothing changed on my site. The videos still look huge on the mobile screen like before. Maybe I did something wrong?

    It’s as if nothing at all happened.

    #470015

    Leo
    Staff

    Did you make sure to Activate the snippet?

    Want to help support GP? Please consider leaving us a review!
    https://wordpress.org/support/theme/generatepress/reviews

    #470026

    As Leo says, did you click “Save Changes and Activate” ?

    The updated version of Code Snippets made a change where the above button is now the default one. Prior to that, if you wanted this to be the case, one had to go to the Setting for the plugin and make that choice and save.

    http://snifflevalve.com
    Tutorials and tips for GeneratePress, WP Show Posts, WordPress and Elementor

    #470031

    Yes. At the bottom of the Snippets window it has the save changes button (and the scope is set to run everywhere).

    I did not know what to type for the description, so I just put some text in there “To fix videos”.

Viewing 15 posts - 1 through 15 (of 27 total)

You must be logged in to reply to this topic.