Skip Navigation

[Resolved] Youtube url – related videos

This thread is resolved. Here is a description of the problem and solution.

Problem: I have a custom URL field that my visitors populate using a front-end Form. The URL is a YouTube video URL, and I would like to display the video in an embedded player with the URL parameter rel=0 attached so no related videos are displayed. However, I do not expect my Users to add the rel=0 parameter when they enter the YouTube URL on the front-end. How can I append the URL parameter programmatically in the template when the video is displayed?

Solution: You need a custom shortcode to do this. The following can be used as a guide:

add_shortcode( 'no-rel-youtube', 'no_rel_youtube_func' );
function no_rel_youtube_func($atts) {
  global $post, $wp_embed;
  $atts = shortcode_atts( array(
    'field-slug' => 'your-field-slug',
    'post-id' => $post->ID
  ), $atts );
  $field_value = get_post_meta( $atts['post-id'], 'wpcf-' . $atts['field-slug'], true );
  return $wp_embed->run_shortcode("[embed width='500' height='300']" . $field_value . "&rel=0[/embed]");
}

Replace your-field-slug with the slug of the field containing the URL, and adjust the height and width of the embed shortcode as needed. Render the player with the custom shortcode, like this:

[no-rel-youtube][/no-rel-youtube]

Relevant Documentation:
https://codex.wordpress.org/Embed_Shortcode

This support ticket is created 3 years, 4 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 - -
13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 - -

Supporter timezone: America/New_York (GMT-04:00)

This topic contains 6 replies, has 2 voices.

Last updated by michaelR-26 3 years, 4 months ago.

Assisted by: Christian Cox.

Author
Posts
#1852727
Screenshot 2020-11-22 091028.jpg

Tell us what you are trying to do?

I have a custom field called "welcome-video-url" set to a type or URL. I am using a YouTube URL in the custome field I am trying to append “?rel=0" to that URL in an outputted iframe I have added to a custom template in a fields and text module, like this <iframe src="[types field='welcome-video-url' output='raw'][/types]?rel=0" allow="autoplay; encrypted-media" allowfullscreen="" width="525" height="295" frameborder="0"></iframe>

When I view my custom post type which uses this template, I get an error message that says this

"Firefox Developer Edition Can’t Open This Page

To protect your security, hidden link will not allow Firefox Developer Edition to display the page if another site has embedded it. To see this page, you need to open it in a new window."

Is there any documentation that you are following? Yes, here https://toolset.com/forums/topic/youtube-url-related-videos/

What is the link to your site? You can see it here hidden link with the password skidazzle2020! The iframed player is just below the opening paragraph at the top of the page.

#1852773

Hello, as the message says, you cannot load a youtube.com URL directly inside a custom iframe src on a site outside of youtube.com. There are security measures in place on youtube.com that enforce this, it is not specific to Toolset. For example, try placing an iframe with a hard-coded Youtube URL in the src attribute, like this:

<iframe src="<em><u>hidden link</u></em>" allow="autoplay; encrypted-media" allowfullscreen="" width="525" height="295" frameborder="0"></iframe>

The video will not play, because of security measures in place on Youtube.com. As you can see, this is not a Toolset-specific problem, it is because of how YouTube enforces security of their embedded content. If you want to load a Youtube video on your site, you must use a different approach. We recommend you use a Toolset Types "Embedded Media" field type to store the YouTube URL and display the video. For a custom solution, you could also use WordPress's own embed shortcode with the Types URL field:
https://wordpress.org/support/article/embeds/

#1852901

Thanks for helping me Christian. I tried the Toolset Embedded Media option, but it won’t allow me append the URL with ?rel=0, which is what I need so that related videos are not suggested at the end.

I also tried using this [embed width="123" height="456"][types field='welcome-video-url' output='raw'][/types][/embed] but the same issue, and they video would not load.

Can you suggest anything else?

#1852931

- Are you saying you do or don't want to include the rel=0 parameter in the field value?
- Can you share one of the YouTube URLs you want to use in the embed?

For example, if you want to embed...

<em><u>hidden link</u></em>

...in a player with no related videos, you can do that by saving the custom embed field value with the rel=0 attribute like so:

<em><u>hidden link</u></em>

When more than one URL parameter is included, each one after the first should be separated by '&', not '?'. This URL already has one parameter, v.

#1852933

I do want to use the rel=0, but since I am collecting the URL via a cred form, I would like to somehow insert the attribute dynamically in the template as I can't trust users to correctly submit the URL with the attribute at the end.

I saw one example of this uing a custom short code https://toolset.com/forums/topic/field-for-embed-youtube-video/ but could not get it to work.

#1853489

If you want to enforce the rel=0 attribute when the YouTube URL is entered in the Form, we offer the cred_form_validate API: https://toolset.com/documentation/programmer-reference/cred-api/#cred_form_validate
Using this API, you can verify whether or not the parameter rel=0 exists and is formatted correctly in the YouTube URL and return a descriptive error if not. That would enforce the requirement on the front-end of the site during data entry.

If you do not want to enforce the rel=0 attribute on the front-end during data entry and would prefer to programmatically insert it in the embedded video URL, you need a custom shortcode. You can trigger the Embed Shortcode feature using global $wp_embed and its run_shortcode function:
https://codex.wordpress.org/Embed_Shortcode

Pass in an embed shortcode with the URL fully formed:

add_shortcode( 'no-rel-youtube', 'no_rel_youtube_func' );
function no_rel_youtube_func($atts) {
  global $post, $wp_embed;
  $atts = shortcode_atts( array(
    'field-slug' => 'your-field-slug',
    'post-id' => $post->ID
  ), $atts );
  $field_value = get_post_meta( $atts['post-id'], 'wpcf-' . $atts['field-slug'], true );
  return $wp_embed->run_shortcode("[embed width='500' height='300']" . $field_value . "&rel=0[/embed]");
}

Replace your-field-slug with the slug of the field containing the URL, and adjust the height and width of the embed shortcode as needed. Render the player with the custom shortcode, like this:

[no-rel-youtube][/no-rel-youtube]
#1853915

Thank you, the custom shortcode worked perfectly!
My issue is resolved now. Thank you!

This ticket is now closed. If you're a WPML client and need related help, please open a new support ticket.