Security Alert: 26 BuddyDev accounts compromized in brute force attack.

BuddyDev

Search

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

  • Participant
    Level: Enlightened
    Posts: 95
    Maksim Rusakovich on September 13, 2018 at 11:43 am #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: 24706
    Brajesh Singh on September 13, 2018 at 1:32 pm #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 September 13, 2018 at 1:56 pm #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: 24706
    Brajesh Singh on September 13, 2018 at 5:58 pm #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 September 13, 2018 at 6:41 pm #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: 24706
    Brajesh Singh on September 13, 2018 at 6:51 pm #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 September 13, 2018 at 7:00 pm #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: 24706
    Brajesh Singh on September 14, 2018 at 12:54 am #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 September 14, 2018 at 7:07 am #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: 24706
    Brajesh Singh on September 14, 2018 at 2:14 pm #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