Enhance YouTube embed block with player parameters

[0aveRyan]

Is your feature request related to a problem? Please describe. Currently the YouTube embed block is one-size-fits-all, when a number of parameters can be used to configure YouTube players that could be helpful to users.

Describe the solution you'd like Similar to #2744 for Twitter embeds, it'd be great to surface a few params as sidebar controls:

• Autoplay 🙈 (or, maybe not this one.. 😎)
• Start time
• End time
• Color (red or white)
• Controls (1 or 0 to hide)
• Fullscreen (1 or 0 to hide)

[0aveRyan]

Player parameters reference: https://developers.google.com/youtube/player_parameters

[MarkRH]

Yeah it does seem that right now it strips out any parameters you add to the URL.

[swissspidy]

There's also the possibility to embed from youtube-nocookie.com instead of youtube.com for privacy reasons. See #12701

Yeah it does seem that right now it strips out any parameters you add to the URL.

Yup, extra params need to be whitelisted in PHP, otherwise WP core strips them.

So if any options are added here, WP core needs to be updated as well.

[notnownikki]

It's not core stripping out parameters here, it's YouTube's oEmbed API does not do anything with the parameters.

If you try this with https://www.youtube.com/oembed?url=https://www.youtube.com/watch?v=dLc9jiBgXYQ%26autoplay%3D1 you'll see that the returned HTML does not have the autoplay argument on the iframe's source, which is needed for the video to autoplay. The capability exists in the iframe, but the parameter to make it actually do it, isn't there.

YouTube say that to get these features, you need to insert an iframe yourself with the required parameters.

The problem there is that non-admin users can't insert iframes, and with their oEmbed endpoint not putting in the required parameters, we'd have to have a dynamic block on the server side that did this for us, bypassing oEmbed. We'd also have to make that backwards compatible so that if Gutenberg was disabled after using these features, the URL would embed as normal.

[swissspidy]

Ah right, that‘s how it worked. But oEmbed blocks are saved with the URL only, right?

In this case WP just has to re-add existing query params to the oEmbed result. I did this in the past in plugins. No need for a dynamic block there.

[notnownikki]

We'd still need to store the options, and have some server side code to add the options into what oEmbed returns, so no matter what we call it (dynamic block, plugin code...), the considerations of deactivating Gutenberg are the same. We'd be introducing some server side Gutenberg specific rendering for embed blocks which shouldn't break embeds if it the code no longer runs.

I don't think that part of it is a big problem, just something to remember when the tests are written :)

[apermo]

To add one more option that seems to be needed.

rel=0/1 if you want to disable suggestions at the end of the video

Ran into that issue posted on a german WordPress Support Group on Facebook.

[notnownikki]

The rel option changed recently so it no longer disables the suggestions, it now limits the suggestions to the same channel.

But yes, that needs to be an option.

This is taking a little more time than I expected because some providers have options handled by shortcodes (e.g. twitter has media display options provided by a jetpack shortcode) and the API needs to handle that

[apermo]

I think we could just sum it up, that all options that can be sent to youtube, would be useful to be available, maybe add an additional "advanced options" field, to allow to add own parameters. That way people could be able to add parameters, like utm and others that we actually might miss.

[notnownikki]

Yes that sounds good. The embed extension API I'm building will allow us to do that.

[GlennMartin1]

+1 to making this a priority!

The rel option is a must.

[vitamincee]

+1 on not stripping the rel=0 option. I've had to remove all youtube embeds and use iframes on a site because it was showing off-channel related videos when it should be only showing on-channel.

[stljeff1]

is this active? This is a pretty simple request, will there be a simple solution? I would love to empower my clients by allowing them to add youtubes to pages EASILY without requiring them to paste iframes.

[notnownikki]

There's a blocked PR that allows us to extend embed blocks in such a way that plugins like Jetpack can also do it, but it's currently blocked by a core bug. It might be simpler at this point if someone does something specific for YouTube.

https://github.com/WordPress/gutenberg/pull/14050 https://github.com/WordPress/gutenberg/issues/9757

[elron]

Any update on this? Its needed

[stljeff1]

I ended up using ACF Pro to create a custom block that has a URL field. On my site, all videos need to not show "Related Videos", so I just tack on the rel=0 on the URL by default.

Alternatively, I think I may create a custom block from scratch so to avoid using ACF pro, but that is not available yet. If I create suck a block, I will post it here

Sadly, however, I'm still disappointed that this functionality is not available by default. Even though Youtube is forcing related videos regardless, i still think this should be fixed in Wordpress Core, as this is yet another example of WP advertising ease of use, yet doesn't allow for simple, reasonable customizations.

[elron]

I ended up using ACF Pro to create a custom block that has a URL field. On my site, all videos need to not show "Related Videos", so I just tack on the rel=0 on the URL by default.

Alternatively, I think I may create a custom block from scratch so to avoid using ACF pro, but that is not available yet. If I create suck a block, I will post it here

Sadly, however, I'm still disappointed that this functionality is not available by default. Even though Youtube is forcing related videos regardless, i still think this should be fixed in Wordpress Core, as this is yet another example of WP advertising ease of use, yet doesn't allow for simple, reasonable customizations.

Sounds useful to use ACF Pro to create a custom block to solve this. Can you share your code with us?

[stljeff1]

@elron here you go. https://github.com/stljeff1/portfolio/tree/master/Wordpress/Gutenberg-Youtube-Block-Using-ACF

If I come up with a block that does not use ACF, I'll let you know

[GlennMartin1]

Hopefully this issue can be prioritized.

[GlennMartin1]

Could this be milestone for 6.7?

[tyrann0us]

My two cents: In my opinion, this issue should be prioritized because there are use cases where it is imperative to change the default behavior. Examples:

• Corporate websites may have policies that prohibit showing videos from other channels (rel=0).
• For GDPR compliance it must be possible to use the youtube-nocookie.com domain, which to my knowledge is currently not possible in the YouTube block.

For reference here is a screenshot of the controls available on YouTube:

[SJNBham]

Surprised the rel=0 isn't a simple block option or even the default setting. In looking into options, here are the top three easiest ways we found to get this to work:

1) Use the YouTube block in Gutenberg, paste the share URL YouTube provides, and add the ?rel=0 to the end of the URL. Our testing shows the block keeps that parameter and the resulting code returned by YouTube honors that parameter. Not sure why others are reporting that's not working. Can anyone else confirm passing the ?rel=0 parameter via the URL is working for them too (as of 1/17/2020)?

2) Use option 1 above and then save it as a reusable block. Then have editors insert the reusable block, convert it to an editable block, and replace the YouTube share URL taking care not to overwrite the end with the parameter. This is more complicated, but doesn't require editors to remember the proper format for adding the parameter.

3) Install a plugin that specializes in embedding YouTube videos. Something like: https://wordpress.org/plugins/youtube-embed-plus/. We found the setup and block insert process more complicated than the Gutenberg YouTube block. But it does give extensive options, allows you to specify defaults, and includes the ability to add playlists, etc.

If YouTube really is honoring the parameters passed in the URL, wouldn't it be pretty straightforward to provide block properties for some of the most common parameters and have those appended to the URL?

[GlennMartin1]

@SJNBham Option 1: As of Gutenburg 7.2, if I insert a YouTube block and append ?rel=0 on the end, I get this error:

Option 2: Option 2 doesn't work because Option 1 doesn't work.

Option 3: Not ideal, but I'm aware this is a workaround. This should clearly be native to the YouTube block in core.

[SJNBham]

@GlennMartin1 - Sorry for the confusion. We were doing so much testing, we crossed some wires. However, additional testing gave us an even better solution - at least until the standard YouTube block is enhanced:

1) Install the following plugin: https://wordpress.org/plugins/youtube-embed-plus/

2) Configure the plugin using their wizard or manually - you're choice. Just be sure to set the defaults to your preference. For example, on the plug-in default settings tab:

3) Insert a standard YouTube block and add the short URL YouTube provides when you select the share option from their website. For example: https://youtu.be/0ar4DezKKGI

4) Publish the page and skip to the last few seconds of the video and let it play through. You'll see the related videos option is honored. You can also inspect the HTML and see where it's specified:

The cool part is site editors can just use the standard YouTube block and paste the short URL provided by YouTube's share button. The plugin's YouTube Wizard block that's more complicated/confusing doesn't have to be used.

As a side note, try adding https://youtu.be/0ar4DezKKGI?rel=0 as the URL in a YouTube embed video block. See if you get the same error message. I'm wondering if you might be getting that error because you're using two ?s instead of a ? and then an & character? I'm not getting an error when using my example URL. However, I didn't realize the plugin above was adding the rel=0 functionality instead of the parameter I was tacking on to the end in the YouTube block. So adding parameters to the end of the URL does not get passed on to YouTube with the current standard YouTube block - the plugin is required to add parameters.

[GlennMartin1]

Thanks - I'll check it out.

[thomasmb]

@GlennMartin1 adding ?rel=0 didn't work because is broke the link syntax, which is why you got the error. Should have been &rel=0 in your case. After the first param & is used instead of adding another ?.

[bobeaston]

In the meantime, there's a solution that can be added to functions.php.

No plugin needed, less code.

[SJNBham]

@bobeaston - that looks like a nice solution! I think it still shows related videos for the channel the video you're embedding is from though. The YouTube plugin allows you to suppress all related videos.

[bobeaston]

My interest was in allowing MY related videos to show, but not depend on a bloated plugin, and this answer worked well. &rel=0 is the right parameter for that.

For your needs, look at the code that the plugin generates. Figure out which parameter is making the difference. Then, modify this little bit of code to substitute that parameter.

[SJNBham]

@bobeaston - understood. I'm not aware of a parameter that can be appended to the URL that will suppress related videos from the channel the video is from. I'm unsure how this YouTube Embed Plus plugin is accomplishing it, but I don't think it's using a URL parameter, unfortunately.

[bobeaston]

@SJNBham You're right. It isn't a URL parameter. After a bit of reverse engineering, I see that the YouTube Embed Plus plugin stops all related videos with a combination of 3 things.

1. It enables JavaScript control of the player with enablejsapi=1. BTW, Google says this is a deprecated API. So, we don't know how long they will continue to support it.
2. The JavaScript module ytprefs.js (included in the plugin) then controls how the video is played.
3. A parameter, data-relstop=1, is used to tell the script to stop playback before the related videos can be shown. (and to revert back to the first frame)

Bottom line, for this discussion, if you want something that can limit related video references to those videos on your own channel, I can provide it for the cost of 345 bytes. If you want total removal, the YouTube Embed Plus plugin can do it for the cost of a bit over 7 Mbytes.

[SJNBham]

@bobeaston Thanks for looking into how the plugin is completely suppressing any related videos. It is a little disappointing Google might drop support for that API. They're in the business of drawing people into their content, so I can't fault them for trying to force the related videos. I guess we'll use the plugin until we can't.

Thanks for providing such a simple fix for appending the rel=0 parameter. It's what we'll use if the plugin stops working for us ;)

[SJNBham]

@bobeaston

Looks like I waited too long to grab a reference copy of the code snippet. Would you mind sharing that again? The following link doesn't appear to be working:

In the meantime, there's a solution that can be added to functions.php.

[bobeaston]

That site will probably reappear after the owner finishes moving it. I took his code and modified it for the only parameter I care about. Here's my version...

<?php  /// discard this line ///
// Add &rel=0 to Gutenberg YouTube Blocks
function ree_youtube_player( $block_content, $block ) {
  if( "core-embed/youtube" === $block['blockName'] ) {
    $block_content = str_replace( '?feature=oembed', '?feature=oembed&rel=0', $block_content );
  }
  return $block_content;
}
add_filter( 'render_block', 'ree_youtube_player', 10, 3);

[VIPStephan]

For the records: this solution also appears to work for youtube-nocookie URLs. Simply str_replace “youtube.com” with “youtube-nocookie.com”, e. g. from the above code:

if( "core-embed/youtube" === $block['blockName'] ) {
    $block_content = str_replace( 'youtube.com', 'youtube-nocookie.com', $block_content );
}

[bobeaston]

Interesting idea. THANKS Stephan!

[GlennMartin1]

@VIPStephan @bobeaston It appears both these solutions only work if you're not signed into YouTube. If you're signed into your YouTube account, the suggested videos display anyway.

Any ideas?

[bobeaston]

@GlennMartin1 My experience, combined with fairly extensive searching, is that recommended videos are always shown, no matter whether one is logged onto YouTube or not. I see them when using a incognito browser window and not signed in, when using an incognito window and signed in, or when using my favorite browser signed in or not.

The variable is WHICH recommendations are shown, YouTube's choice, or your choice (achieved with rel=0).

So far, the only thing I have seen that successfully stops the display of recommended videos is a plugin (YouTube Embed Plus) which uses JavaScript to manage the player, and a parameter (data-relstop=1) that stops the player at the point where the recommendations normally appear. That plugin is 7MB of code, too much for my tastes, too much for too little benefit.

[GlennMartin1]

@bobeaston Thanks for your reply.

To clarify, I'm 100% ok with suggested videos from within my channel.

My point is that rel=0 only works if you're not logged into YouTube.

[bobeaston]

@GlennMartin1 Hmmmmm. That's not my experience. It works for me whether I'm logged in or not. Of course, it could be my browser, which is normally Brave, built upon Chromium. Also works as expected in the Vivaldi browser and even Microsoft Edge. On my Android phone, it works in both Brave and Chrome browsers whether signed in or not. Perhaps it's your browser.

BTW, no Apple devices here...

[porg]

Closed Captions (CC) a.k.a. Subtitles

• I dearly miss the option that playback shall start with CC being displayed right away cc_load_policy=1
• and which CC language to use (e.g. cc_lang_pref=en).

🙁 A lot of effort I put into my Youtube closed captions, only to not be useable on WordPress.

Interestingly according to this WordPress Youtube Embed testimonial from 10/2021 it seems to have been possibly to hand over the player parameters via the URL.

But when I put these parameters into the embed URL, https://www.youtube.com/embed/MY-VIDEO-ID?cc_lang_pref=en&cc_load_policy=1&autoplay=0&playsinline=1&loop=0&start=0&end=0&modestbranding=0&rel=0 they not make it to the Frontend output (analysis in the posts above), and besides the ID nothing makes it through.

[porg]

Fixed it by overriding the default URL parameters of the YouTube Embed block with a str_replace() of an URL part in the functions.php of my block theme folder.

• At least something: Different site-wide defaults. Showing subtitles for all Youtube videos now.

• But ofc I'd prefer the possibility to set this on a per-video basis.

[danstramer]

Any progress on this? It makes me use the HTML code block with the complete YouTube embed code, then manually adding the 'rel=0' along other parameters. I think a small improvement to allow paramaters in the YT block would go a long way, Then, as an enhancement I would also add checkboxes for additional features as part of the block, such as: autoplay, cc_load_policy, controls etc... (from here: https://developers.google.com/youtube/player_parameters#Parameters_ Thanks!