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

In regards to the COVID-19 situation

Your support team is currently doing their best to offer the best support possible despite the current COVID-19 situation. However during these exceptional circumstances, please note that you should expect a response time of 2-3 business days, until further notice.Rest assured that we will still do our best to handle your requests as soon as possible! Everyone stay safe and healthy! 😷

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
    • 2034 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
    • 3999 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.