Profile Field Embed Code

[ChristelijkPodium]

I want to add a field to embed a video url, so it shows the actual video and not just the url.

Now with the url field it only shows the url, for example: https://www.christelijk-podium.nl/christelijke-talenten/gideonsgang/profile/

[Kieran_SQ]

Hi,

That would require custom code to achieve I think, but I cannot find a suitable off the shelf plugin for you.

We have just released an update of a once defunct plugin called Buddypress XProfile Custom Field Types Reloaded which adds a ton of custom field types to the BuddyPress profile.

Currently embeds are not an option but I think it would be worth opening a topic in the support tab for the WordPress.org plugin and asking our core developer to look into including this for you. Let them know in the topic that you have the KLEO theme.

Plugin: https://wordpress.org/plugins/bp-xprofile-custom-fields/

Plugin Support: https://wordpress.org/support/plugin/bp-xprofile-custom-fields

Side note: For YouTube embeds to work properly in BuddyPress it must be the full youtube.com URL and not youtu.be (shortened) URL used in your example.

Thanks,

Kieran

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Custom development requests can be sent to dev@seventhqueen.com, one of the development team will be happy to discuss your needs.

[ChristelijkPodium]

We were able to implement this on our old website, and users have been able to use it, but the developer past away, so I don’t know how he did it. I do see he installed the bp-xprofile-custom-fields plugin, but when I use the Website(HTML5) field type, it’s not showing the video, only the url.

Here is an example of a profile where this works: https://christelijkpodium.nl/leden/info6/

[Kieran_SQ]

Hi,

If you can share access to this site I can take a look for you. I cannot promise that I will find it as it could realistically be anywhere, but, if it’s in the right place then I may be able to help.

Kieran

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Custom development requests can be sent to dev@seventhqueen.com, one of the development team will be happy to discuss your needs.

[ChristelijkPodium]

This reply has been set as private.

[Kieran_SQ]

Hi,

The WordPress code editor is disabled on the back-end of that site so I cannot check the KLEO Child theme’s functions.php. Can you please download the functions.php, add it to a .zip archive and upload it to this ticket so I can check it.

Please do not paste the contents of the file here if there is a lot of content. If there is only a small amount of code please paste it here but make sure to use the code tag before and after the code so that the formatting is correct.

Thanks,

Kieran

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Custom development requests can be sent to dev@seventhqueen.com, one of the development team will be happy to discuss your needs.

[ChristelijkPodium]

This reply has been set as private.

[Kieran_SQ]

Hi,

The custom code for the field embed was indeed in the functions.php file. It’s for a field titled ‘Intro video’, replace any instances of this term if the name of your field has changed (case sensitive).

COPY CODE

function set_video_field( $field_value ) {
	$bp_this_field_name = bp_get_the_profile_field_name();
	//$bp_this_field_id = bp_get_profile_field_data($bp_displayed_user_id, 'Intro video');
	// field name (case sensitive)
	if ($bp_this_field_name == 'Intro video' && isset($field_value)) {
		//$val = xprofile_get_field_data('1083', $bp_displayed_user_id);
		//$val = bp_get_profile_field_data($bp_displayed_user_id, 'Intro video');
        // building the HTML and h/w of the iframe
		//$field_value = wp_oembed_get($field_value, array('width'=>640,'height'=>320));
		//parse_str( parse_url($field_value, PHP_URL_QUERY), $my_array_of_vars );
		//$video_id = $my_array_of_vars['v'];
		$url = parse_url($field_value);
	    if($url['host'] == 'youtube.com' || $url['host'] == 'www.youtube.com' || $url['host'] == 'youtu.be'):
	    	$field_value = preg_match("/^(?:http(?:s)?:\/\/)?(?:www\.)?(?:m\.)?(?:youtu\.be\/|youtube\.com\/(?:(?:watch)?\?(?:.*&)?v(?:i)?=|(?:embed|v|vi|user)\/))([^\?&\"'>]+)/", $field_value, $matches);
	        $video_id = $matches[1];
			$field_value = '<iframe width="640" height="360" src="https://www.youtube.com/embed/'.$video_id.'" frameborder="0" allowfullscreen></iframe>';
			echo $field_value;
	    elseif($url['host'] == 'vimeo.com' || $url['host'] == 'www.vimeo.com'):
	    	$field_value = preg_match("https?://(?:www\.)?vimeo\.com/([0-9]{6,10})", $field_value, $matches);
	        $video_id = $matches[1];
			$field_value = '<iframe width="640" height="360" src="https://player.vimeo.com/video/'.$video_id.'" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>';
			echo $field_value;
		//$field_value = wp_oembed_get( $field_value, array( 'width' => 640 , 'height' => 360) );
		else:
			echo $field_value;
		endif;
	}
	return $field_value;
	//return wp_oembed_get( $field_value );
}
add_filter('bp_get_the_profile_field_value','set_video_field',1);

Thanks,

Kieran

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Custom development requests can be sent to dev@seventhqueen.com, one of the development team will be happy to discuss your needs.

[ChristelijkPodium]

Unfortunately, adding the code breaks the website 🙁

I think it does more, then just showing a video preview of the url.

Can you extract the exact code responsible for showing a url as a video preview in this field?

[Kieran_SQ]

Hi,

It should work okay as it’s a direct copy of the code from your other functioning site. The code that I sent you is the exact code that generates the preview. The code opens with the function set_video_field and ends with add the filter set_video_field. There isn’t any other code before or after that is relevant to profile fields and embeds. The lines I have copied from are 698-728.

Make sure not to copy the code from the email only this ticket, as formatting will be stripped from the email transcript. Also, make sure the code is pasted on a new line, by itself, at the end of the KLEO Child theme’s functions.php file.

Thanks,

Kieran

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Custom development requests can be sent to dev@seventhqueen.com, one of the development team will be happy to discuss your needs.

[ChristelijkPodium]

Hi! I copied the code from the e-mail the first time. I copied it from the ticket this time and got it to work, but there is still a piece of code underneath the video. How can I avoid this from happening?

example:
https://www.christelijk-podium.nl/christelijke-talenten/marina/profile/

[Kieran_SQ]

Hi,

I’m not sure why that text is being output, does the same happen if you use the fully qualified URL for the video and not youtu.be?

Either way, so long as the ID for the field stays the same you can use a little CSS to hide this

COPY CODE

.field_322 p {
    display: none !important;
}

Kieran

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Custom development requests can be sent to dev@seventhqueen.com, one of the development team will be happy to discuss your needs.

[ChristelijkPodium]

Hi I am using the youtu.be url.

Where do I need to add this piece of code?

[Kieran_SQ]

Hi,

This is custom CSS and therefore should be added to WP Admin > Appearance > Editor > KLEO Child > Style.css on a new line at the end of the file.

I can see you were using the youtu.be which is why I asked if the full youtube.com url made a difference for you. I just tested this and it does not make any change.

Thanks,

Kieran

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Custom development requests can be sent to dev@seventhqueen.com, one of the development team will be happy to discuss your needs.

[Author]

Posts