BuddyDev

Search

[Resolved] Embed streamable.com video in member profile field

  • Participant
    Level: Enlightened
    Posts: 95
    Maksim Rusakovich on #17312

    Hello.
    The theme is: how to insert video in member profile field.
    Now the video is inserted with big top and bottom frames
    http://prntscr.com/ktxjzx

    How to remove them?
    https://r.abodva.com/members/maxrusakovich/

    I found this code

    
      function bp_embed_in_profile() {
    	add_filter( 'bp_get_the_profile_field_value', 'bp_enable_embed_in_profile', 9, 3 );
    }
    add_action( 'bp_init', 'bp_embed_in_profile', 0 );
    
    function bp_enable_embed_in_profile( $val, $type, $key ) {
    
    	$field = new BP_XProfile_Field( $key );
    	$field_name = $field->name;
    	
    	$provider = array( 'youtube', 'vimeo', 'instagram', 'bliptv', 'twitter');
    	
    	if(  strtolower( $field_name ) == in_array( strtolower( $field_name ) , $provider ) ) {
                    $val = strip_tags( $val );
    		return wp_oembed_get( $val, array( 'width' => 400 ) );	
    	}
    		return $val;
    }
    

    But it’s for youtube and vimeo.

    Streamable embed code has his own style:
    <div style="width:100%;height:0px;position:relative;padding-bottom:56.250%;"><iframe ...</iframe></div>

    How to remove this style using the code snippet above?
    How to change the code to remove these frames in member fields?
    p.s. I’m not a coder. Sorry.
    Thank you.

  • Keymaster
    (BuddyDev Team)
    Posts: 24149
    Brajesh Singh on #17316

    Hi Max,
    Are you using a 3rd party plugin to support streamable as oembed? WpordPress does not seem to support it out of the box.

    https://codex.wordpress.org/Embeds#Okay.2C_So_What_Sites_Can_I_Embed_From.3F

    If you can point me, I will be able to provide some code.

    Thank you
    Brajesh

  • Participant
    Level: Enlightened
    Posts: 95
    Maksim Rusakovich on #17319

    Hello Brajesh

    I just inserted code mentioned above in functions.php

    It’s working, but with not correct styling.
    I’m not a coder. That is why I’m asking for help.

    1. I found that height parameter is the problem
    https://gyazo.com/fb874d3f6408471a656d1280a4248ce5

    
    
    .media-container {
        /* height: 56.25vw; */
        max-width: 177.78vh;
    }
    
    

    2. I can’t override it with additional CSS in my child theme:
    1. ` .media-container {
    height: auto !important;

    } `

    3. I found that embed stremable code has the same value in style:
    `
    padding-bottom:56.250%
    `

    4. In member profile field I insert only link to the video:

    https://streamable.com/vns0q

    Thank you

  • Keymaster
    (BuddyDev Team)
    Posts: 24149
    Brajesh Singh on #17329

    Hi Max,
    WordPress is able to discover the streamable oembed end point.

    I had a look at the streamable API.

    Streamable does not support maxwidth/maxheight for the video

    Example
    https://api.streamable.com/oembed.json?url=https://streamable.com/vns0q&maxwidth=600

    That’s why it is happening on your site. If possible, you may mail the streamable support and ask if there is a way to support maxheight/maxwidth.

    Regards
    Brajesh

  • Participant
    Level: Enlightened
    Posts: 95
    Maksim Rusakovich on #17335

    Hello Brajesh.

    Thank you.
    Is it possible to cut
    <div style="width:100%;height:0px;position:relative;padding-bottom:56.250%;">
    This part from embed code from streamable via
    return wp_oembed_get( $val, array( 'width' => 400 ) )

    I think this code is replace youtube width to 400px.

  • Keymaster
    (BuddyDev Team)
    Posts: 24149
    Brajesh Singh on #17336

    Hi Max,
    No, It does not work that way.

    Please take a look at youtube’s output

    Example 1:- 480

    https://www.youtube.com/oembed?url=http%3A//youtube.com/watch%3Fv%3DJGwWNGJdvx8&format=json

    Example 2: Max width 200
    https://www.youtube.com/oembed?url=http%3A//youtube.com/watch%3Fv%3DJGwWNGJdvx8&maxwidth=200&format=json

    It is the oembed provider(Youtube or streamable or others) that needs to support/respect the max width. Youtube does, streamable does not.

    Yes, we can replace the width using php but it will be a bad solution as it is bound to break the site in future.
    My advise is to avoid hacks which are not supported to be sure that everything works for a long time.

  • Participant
    Level: Enlightened
    Posts: 95
    Maksim Rusakovich on #17337

    I understand you.

    Maybe you don’t understand me.

    Youtube is working well.

    <iframe width="978" height="550" src="https://www.youtube.com/embed/3k5KWFnnXK4" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

    Stremable code:
    <div style="width:100%;height:0px;position:relative;padding-bottom:56.250%;"><iframe src="https://streamable.com/s/vns0q/hvfgnq" frameborder="0" width="100%" height="100%" allowfullscreen style="width:100%;height:100%;position:absolute;left:0px;top:0px;overflow:hidden;"></iframe></div>

    How to remove <div> from embed code and leave only this part <iframe>?
    <iframe src="https://streamable.com/s/vns0q/hvfgnq" frameborder="0" width="100%" height="100%" allowfullscreen style="width:100%;height:100%;position:absolute;left:0px;top:0px;overflow:hidden;"></iframe>

    I think this code is enough to get the right position of the video. What do you think?

  • Keymaster
    (BuddyDev Team)
    Posts: 24149
    Brajesh Singh on #17338

    Hi Max,
    I have looked into it a little more.

    It seems to me you are copying the “Embed” code and pasting in the field. In that case, there is exact same markup as you have posted.

    If I create a field “Streamable” and change the code from above to use oembed for Streamable too, It does not provide the Div.

    The iframe still contains fixed width/height. We can remove that using regular expression.

    Here is your code from first post modified.

    
    
    function bp_enable_embed_in_profile( $val, $type, $key ) {
    
    	$field      = new BP_XProfile_Field( $key );
    	$field_name = $field->name;
    
    	$provider = array( 'youtube', 'vimeo', 'instagram', 'bliptv', 'twitter', 'streamable' );
    
    	if ( strtolower( $field_name ) == in_array( strtolower( $field_name ), $provider ) ) {
    		$val     = strip_tags( $val );
    		$content = wp_oembed_get( $val, array( 'width' => 400 ) );
    
    		if ( $content && 'streamable' === strtolower( $field_name ) ) {
    			$content = preg_replace(
    				array( '/width="\d+"/i', '/height="\d+"/i' ),
    				array( sprintf( 'width="%s"', '100%' ), sprintf( 'height="%s"', '100%' ) ),
    				$content );
    		}
    
    		return $content;
    	}
    
    	return $val;
    }
    
    add_filter( 'bp_get_the_profile_field_value', 'bp_enable_embed_in_profile', 9, 3 );
    
    

    If you create a field and Name it “Streamable” and then simply paste the video url into it. It will fetch the video.

    You don’t need the embed code. The above code changes width=100%, height=100% but still the result does not seem too good.

    let me know if that works for you.

  • Participant
    Level: Enlightened
    Posts: 95
    Maksim Rusakovich on #17339

    Hello Brajesh,

    Thank you very much for your help.

    I see, that it’s not possible to make it good framed.
    It’s better to leave it with frames but with bigger video size.

  • Keymaster
    (BuddyDev Team)
    Posts: 24149
    Brajesh Singh on #17350

    Thank you Max. I am sorry that it did not work the way you wanted.

    It is possible to hard code the size(in px) in the above code. You may try setting a fixed size and see if that works.

    Regards
    Brajesh

The topic ‘ [Resolved] Embed streamable.com video in member profile field’ is closed to new replies.

This topic is: resolved