- This topic has 5 replies, 3 voices, and was last updated 3 years, 6 months ago by
.
-
Posts
-
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.phpfunction 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%; }
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.
Hi @mllapan,
Thank you for your awesome feedback !
I hope this will help anyone facing the same issue. #SharingIsCaring
Best,
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 tosrc=that includesyoutube.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 inaurl.
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 addcustom.jsas 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.
Hi @mllapan,
Thank you again for your contribution ! 🙂
By doing this, you’re making a great contribution to our community! #SharingIsCaring ??
Thank you!
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.
The topic ‘Make videos 16:9’ is closed to new replies.
