[Resolved] Youtube url – related videos

[Author]

Posts

[michaelR-26]

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.

[Christian Cox]

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/

[michaelR-26]

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?

[Christian Cox]

- 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.

[michaelR-26]

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.

[Christian Cox]

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]

[michaelR-26]

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