Support only during business hours : Monday to friday, from 8:30 am – 5:30 pm CEST

Due to the decrease in our staff due to vacations, our response time may be longer.

Be sure we're doing our best to manage your topic as soon as possible.

Make videos 16:9

This topic is resolved
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • Muamer
    Participant
    • 13 Topics
    • 33 Posts
    @mllapan

    Hi.

    This theme by default has problem on video height in activity stream on mobile phones.
    You offered solution somewhere on this forum in CSS as:

    .activity-inner > p > iframe,
    .activity-inner > iframe {
       height: auto;
       width: 100%;
       min-height: 28vw;
    }
    @media screen and (max-width: 768px) {
       .activity-inner > p > iframe,
       .activity-inner > iframe {
          min-height: 50vw;
       }	
    }

    This will leave black borders on some screen sizes and is not best solution.
    I found different solution that makes videos look better and all in 16:9 format, except smaller sizes that do not match 16:9 will have black borders.
    Put this in functions.php

    function div_wrapper($content) {
        // match any iframes
        $pattern = '~<iframe.*</iframe>|<embed.*</embed>~';
        preg_match_all($pattern, $content, $matches);
    
        foreach ($matches[0] as $match) {
            // wrap matched iframe with div
            $wrappedframe = '<div class="videoWrapper">' . $match . '</div>';
    
            //replace original iframe with new in content
            $content = str_replace($match, $wrappedframe, $content);
        }
    
        return $content;    
    }
    add_filter('the_content', 'div_wrapper');
    
    add_filter( 'bp_embed_oembed_html', function( $html, $url, $attr, $rawattr ) {
        // Wrap the embed with a <div> tag.
        $html = '<div class="videoWrapper">' . $html . '</div>';
        return $html;
    }, 10, 4 );

    CSS:

    .videoWrapper {
      position: relative;
      padding-bottom: 56.25%; /* 16:9 */
      height: 0;
    }
    .videoWrapper iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    Muamer
    Participant
    • 13 Topics
    • 33 Posts
    @mllapan

    Fixes:

    .wp-block-embed__wrapper .videoWrapper {
      display: contents;
    }
    
    .wp-block-embed {
        padding: 1rem !important;
    }
    
    #buddypress:not(.youzer) #activity-stream.grimlock-buddypress-activity-list .activity-item .activity-inner {
        padding: 1rem !important;
    }

    If someone find problems with this, lemme know.

    Olivier
    Keymaster
    Themosaurus Support
    • 0 Topics
    • 2062 Posts
    @themosaurusrex

    Hi @mllapan,

    Thank you for your awesome feedback !

    I hope this will help anyone facing the same issue. #SharingIsCaring

    Best,

    Muamer
    Participant
    • 13 Topics
    • 33 Posts
    @mllapan

    Thanks, but I just discovered this code is not good, because it is wrapping also other iframe content like Twitter or Facebook embeds.
    It would be great if someone comes with code to isolate only YouTube embeds with code above, in another words, my code should be applied only to src= that includes youtube.com.

    After this is acomplished, videos will look great in 16:9.

    Also we need some code to recognize and auto embed image in imginstead in a url.

    Muamer
    Participant
    • 13 Topics
    • 33 Posts
    @mllapan

    Remove code:

    function div_wrapper($content) {
        // match any iframes
        $pattern = '~<iframe.*</iframe>|<embed.*</embed>~';
        preg_match_all($pattern, $content, $matches);
    
        foreach ($matches[0] as $match) {
            // wrap matched iframe with div
            $wrappedframe = '<div class="videoWrapper">' . $match . '</div>';
    
            //replace original iframe with new in content
            $content = str_replace($match, $wrappedframe, $content);
        }
    
        return $content;    
    }
    add_filter('the_content', 'div_wrapper');
    
    add_filter( 'bp_embed_oembed_html', function( $html, $url, $attr, $rawattr ) {
        // Wrap the embed with a <div> tag.
        $html = '<div class="videoWrapper">' . $html . '</div>';
        return $html;
    }, 10, 4 );

    Inside child theme, create folder named js, inside this folder add custom.js as follows:

    /* Wraps YouTube sa Div-om. */
    jQuery(document).ready(function() {
        jQuery('iframe[src*="youtube.com"]').wrap('<div class="videoWrapper" />');
    });

    Insde functions.php add this:

    function add_my_script() {
        wp_enqueue_script(
            'script',
            get_stylesheet_directory_uri() . '/js/custom.js',
            array( 'jquery' )
        );
    }
    
    add_action( 'wp_enqueue_scripts', 'add_my_script' );

    Keep CSS:

    .videoWrapper {
      position: relative;
      padding-bottom: 56.25%; /* 16:9 */
      height: 0;
    }
    .videoWrapper iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

    Now it should influence youtube videos, all around, without messing up other iframes.

    Manathan
    Keymaster
    Themosaurus Support
    • 0 Topics
    • 4913 Posts
    @themodactyl

    Hi @mllapan,

    Thank you again for your contribution ! 🙂

    By doing this, you’re making a great contribution to our community! #SharingIsCaring ??

    Thank you!

Roboraptor 🦖
Themosaurus Topic Closer

Hi there,

This topic has been inactive for a while now so we will be closing it to keep the forum tidy. Don't hesitate to create a new topic if you still need help and we'll be glad to help you!

Best regards,
The Themosaurus team.

Viewing 6 posts - 1 through 6 (of 6 total)

The topic ‘Make videos 16:9’ is closed to new replies.

Troubleshooting Demo Imports

You're trying to setup your theme but you're experiencing errors when importing the demo content? Or you've just followed the setup guide but your website doesn't look exactly like our demo? These are common issues for which you can find easy and quick fixes.

Happy With our Support So Far?

Feel free to review our theme on Themeforest! It helps us making our products more known to new potential customers, which allow us more time to improve the quality and develop new features. #SharingIsCaring ❤️

Discover MatchPress

Skip • Like • Super-Like

Add powerful matching features like Member likes, skips, super likes, conditional private messaging and much more.