Embedded youtube video on buddypress stream


#1

Hi,

I am using your rtpanel theme on my small ngo buddypress website. On buddypress stream embeded video have a size issue.

How can i solve this? I would like to keep good ratio, but now right side is not visible and to high.

Any advice welcome.


#2

Hello Xellale,

Try following JavaScript code. Add this in .js file.

if ( typeof YOUTUBE_VIDEO_MARGIN === 'undefined' ) {
    YOUTUBE_VIDEO_MARGIN = 5;
}

jQuery( document ).ready( function ( $ ) {
/* Youtube Video Resize */
$( 'iframe' ).each( function ( index, item ) {
    if ( $( item ).attr( 'src' ).match( /(https?:)?\/\/www\.youtube\.com/ ) )
    {
        var w = $( item ).attr( 'width' );
        var h = $( item ).attr( 'height' );
        var ar = h / w * 100;
        ar = ar.toFixed( 2 );

        /* Style iframe */
        $( item ).css( 'position', 'absolute' );
        $( item ).css( 'top', '0' );
        $( item ).css( 'left', '0' );
        $( item ).css( 'width', '100%' );
        $( item ).css( 'height', '100%' );
        $( item ).css( 'max-width', w + 'px' );
        $( item ).css( 'max-height', h + 'px' );
        $( item ).wrap( '<div style="max-width:' + w + 'px;margin:0 auto; padding:' + YOUTUBE_VIDEO_MARGIN + 'px;" />' );
        $( item ).wrap( '<div style="position: relative;padding-bottom: ' + ar + '%; height: 0; overflow: hidden;" />' );
        }
    } );
} );

Hope this helps you.

Thanks


#3

Hello sagarjadhav,

I am using rtCamp-rtpanel-child-theme too, under rtpanel. I added to your code to my wp-content/themes/rtCamp-rtpanel-child-theme/js/rtp-custom-scripts.js

But i cant find in generated page source. I think it doesn’t load in. What can i do for using this modified js file, or what’s the better place to paste it your code? So i don’t know, your solution is good or not now.

Thank you


#4

Hello Xellale,

As we are using Grunt for performing repetitive tasks like minification, compilation, etc, Once you added above code in rtp-custom-scripts.js you will need to run grunt command. For more details you can refer following links

If you just want to check whether above code is working or not simply put it rtp-child-package-min.js

Let me know for further assistance.

Thanks


#5

Thank you for your assistance, but it isn’t showd in source, but i pasted it for testing to rtp-child-package-min.js

Do you have any idea? (i dont’t use cache, but i don’t know there is factory cache in wordpress)


#6

Can you please share your site URL so I can that issue?

Thanks


#7

Please send to me an email with your IP address, because my site is under development so in maintenance mode right now, but i will create a login credentials, and i will add to buddypress group.

thank you


#8

Dear sagarjadhav,

i am sorry, i was busy. If you have some free time, please take a look at this issue. I was sending account details to you on Tuesday.


#9

Hello xellale,

As your site in maintenance mode I can not view your site. I have logged in on your site and it looks like you are not give me admin access.

Kindly provide me admin access so I can debug the exact issue.

Thanks


#10

Hi,

i updated your account, and here is an another screenshot from mobile.

This is our buddypress group stream URL, you know our domain: /groups/zenekar/

thank you very much


#11

Hello xellale,

Sorry for delayed reply. I have added video code in functions.php

Check your site now and let me whether your issue is fixed nor not.

Thanks


#12

Thank you very much sagarjadhav. It’s work fine now.


#13

You are welcome :slight_smile:


#14