Problem/Motivation

We would like to add more of the available YouTube Embedded Player Parameters to the YouTube module. Some as field settings, and some as global settings.

Proposed resolution

Add support for the following Global settings:

  • theme display player controls within a dark or light control bar.
  • color specifies red or white for the color of the player's video progress bar.
  • modestbranding lets you use a YouTube player that does not show a YouTube logo.
  • autohide specifies how video controls will automatically hide after a video begins playing.
  • controls indicates whether the video player controls will display.

Add support for the following Field settings:

  • showinfo control the display of information like the video title and author before the video starts playing.
  • modestbranding lets you use a YouTube player that does not show a YouTube logo.
  • autohide specifies how video controls will automatically hide after a video begins playing.
  • controls indicates whether the video player controls will display.

rel indicates whether the player should show related videos when playback of the initial video ends.
*edit* the rel option is already supported in the YouTube module.

Remaining tasks

  • Decide which additional parameters to support
  • Decide whether the parameters are global or per-field
  • Add the settings and effects to the module

User interface changes

  • New form elements under Global settings Admin > Config > Media > YouTube
  • New form elements for field settings Admin > Structure > Content Types > [your type] > Manage fields
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

rolfmeijer’s picture

For anyone interested I added the rel-parameter in the field-display settings.
A patch is included.
This is the first time I created a patch, so I hope it works out properly.

rolfmeijer’s picture

Ah, I only now see that in the general configuration there already is an option to show related videos. My patch will probably conflict with this. Sorry for polluting this issue.

jenlampton’s picture

Status: Active » Postponed

I'm not sure all these settings belong in the field configuration. I think some of them should be global to keep the field UI from becoming any more overwhelming than it already is.

@Tim Jones Toronto Do you have a use case where you need these settings to be different for each field?

misthero’s picture

FileSize
5.05 KB

I added some more options since I needed to make it different depending on where the video is played, I'm creating a video slideshow on the frontpage using views and the video block is small, so i needed to clean up some things like removing title bar and such.

This way I can configure the video to show less information in front page and more on full node where the video size is bigger.

if anyone is intrested, new options are:

modestbranding = reduce the information on the title bar
disable_showinfo = remove the top title bar completely for a cleaner looking video
disable_autohide = make the controls bar at the bottom sticky
disable_controls = remove the control bar completely (useful with autoplay or if you use external controls)

more options

since I'm unable to create a proper patch I attached the files I have changed:

the files are based on the latest snapshot on git.
youtube.module
youtube.theme.inc

Tim Jones Toronto’s picture

@jenlampton

Yes, the settings are fine as Global - and sorry, didn't wish to complicate it in field settings :)

Thanks for the updates on this.

jenlampton’s picture

Title: Some thoughts (for future) on adding Youtube player parameters in field settings (display) » Add additional YouTube player options

Thanks for the feedback @misthero and @Tim Jones Toronto :)

I'm going to update the original issue with a wish-list of settings, indicating which should be global settings and which should be per-field. I'm willing to add an 'Advanced' (collapsed) fieldset on the field settings form, but only if the settings really need to be different on each field. (@misthero provides a good use case for some :)

If anyone else has any other requests for additional YouTube settings you'd like to see supported in this module, please comment here and we can add them for future releases.

jenlampton’s picture

jenlampton’s picture

Issue summary: View changes

updated summray

jenlampton’s picture

Issue summary: View changes

added autohide

jenlampton’s picture

Issue summary: View changes

add color

jenlampton’s picture

Issue summary: View changes

remove equals 1

Tim Jones Toronto’s picture

Issue summary: View changes

making the weather better :)

enzipher’s picture

I would love to see those options added. I would also like to propose an option to enable the API. I believe a global value for that would be okay.

Example:

<iframe id="player" type="text/html" width="640" height="390"
  src="http://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1&origin=http://example.com"
  frameborder="0"></iframe>

The origin value should also be added for security measures and can probably be added automatically without any visible options. It should be the base URL of the site.

Ref: https://developers.google.com/youtube/iframe_api_reference

Cheers,

guschilds’s picture

Commenting on the Remaining Tasks from the original description...

Decide which additional parameters to support

I think the only other parameters worth supporting (in addition to those in the original description) are those listed by enzipher in #7: enablejsapi (which should then enable origin as well). Do we then need to worry about 'playerapiid'? (Javascript API docs)

The only other one I can see making sense is 'iv_load_policy', which allows you to hide annotations by default. Only reason I bring that up is because annotations typically drive me crazy.

Decide whether the parameters are global or per-field

Taking the newly mentioned parameters and misthero's use case from #4 into account, my opinions are:

Global settings

  • enablejsapi enables use of the Javascript API with the player (needs origin).
  • modestbranding lets you use a YouTube player that does not show a YouTube logo.
  • theme display player controls within a dark or light control bar.
  • color specifies red or white for the color of the player's video progress bar.

Field settings

  • showinfo control the display of information like the video title and author before the video starts playing.
  • autohide specifies how video controls will automatically hide after a video begins playing.
  • controls indicates whether the video player controls will display.
  • iv_load_policy controls whether or not annotations are shown by default (not married to this one).

As some options are listed in both Global and Fields in the description, I debated the possibility of allowing global defaults to be set and then overridable on a field-by-field basis. This may be overkill and a source of confusion, so I didn't duplicate any above.

I also agree with #6 in that should these Field settings be added, they should be in an "Advanced" (or similarly named) collapsed fieldset.

Any thoughts from anyone? After we finalize this list we can get to adding them!

Thanks,
Gus

Tim Jones Toronto’s picture

Hi Gus, thanks for this.

Both Global and Field settings look good as the final review.

  1. For me personally, I like the autoplay as #4 in the Field setting to do per-video instead of Global. The layout in #4 doesn’t look overly complicated (to me anyway!) but an advanced collapsed fieldset could be used.
  2. The ‘iv_load_policy’ is low priority, but can be added if needed.
  3. The ‘enablejsapi’ and ‘origin’ could be put in – but just to make sure that when running multiple domain sites e.g. Domain Access, that the base URL is respected per domain etc.

Overall, the additions will extend a great module!

Thanks, and can test any code.
Tim.

guschilds’s picture

Status: Postponed » Needs review
FileSize
11.68 KB

I have implemented the 8 new parameters as described in #8.

Please give the attached patch a shot (against the latest git branch) and let me know what you think!

I would like to get a few people to try it before moving forward.

Thanks,
Gus

l.damen’s picture

Just a small quickfix which is a bitt less complex.

You can add your parameters easily into the youtube.theme.inc

It's not a patch, but just an easy solution/work around to quickly activate your parameters.

@line 44 you can see;

 $output = '<iframe width="' . $dimensions['width'] . '" 
    height="' . $dimensions['height'] . '" src="' . $src . '" 
    frameborder="0" allowfullscreen></iframe>';

  return $output;

After the $src you can quikly add your parameters like, hide controls etc.

   $output = '<iframe width="' . $dimensions['width'] . '" 
    height="' . $dimensions['height'] . '" src="' . $src . '&autohide=1' . '" 
    frameborder="0" allowfullscreen></iframe>';

  return $output;

It's not like a best solution, but it's just a nice workaround if you don't have to use a UI to control the settings.
All the useable parameters can be found on:
https://developers.google.com/youtube/player_parameters

lgoal’s picture

FileSize
6.57 KB

Based on misthero patch at #4 I have added the relative videos parameter

guschilds’s picture

Still waiting on a review of #10... anyone?

@l.damen

You are correct. That is one way to apply a parameter to all videos sitewide, but as I'm sure you know that customization will be lost should you update the module in the future. It may also break the URL generation if no other parameters are involved. If you take a look at how the URL is created in youtube.theme.inc:

$path = $protocol . '://www.' . $domain . '/embed/' . $id;
$src = url($path, array('query' => $query));

$output = '<iframe width="' . $dimensions['width'] . '" 
  height="' . $dimensions['height'] . '" src="' . $src . '" 
  frameborder="0" allowfullscreen></iframe>';

You'll notice that $id isn't added as a ?v= parameter. If $query is empty, you'll have no ? to start your query string that you're adding to with your code. You're better bet in hacking the module would be adding the following above this generation:

$query['parameter'] = 'value';

Replacing parameter and value with your parameter's name and value, of course.

@lgoal

That option is built into the module at "Configuration > Youtube settings". You can check/uncheck "Show suggested videos when the video finishes" as you please, though that will affect all videos rather than being configurable at the field display level.

Tim Jones Toronto’s picture

Hello Gus,

Sorry for the delay in testing, I tried the patch a while back and got an error in the patching.

I have put the patch in the 'youtube' folder, and issued the patch command, but got some errors:

>Hunk #1 FAILED at 41 error and rejects file.
>1 out of 7 hunks FAILED -- saving rejects to file youtube.module.rej

Could you attach a zip maybe or check what I may be doing wrong?

I can test it right away then. Thanks!

enzipher’s picture

@guschilds
I did try out the patch you provided but I couldn't get youtube_showinfo, youtube_controls, and youtube_autohide to work. I didn't have the possibility to try youtube_iv_load_policy. No error message or anything, just didn't seem to have any effect. As far as I could tell the variables was saved correctly. Unfortunately I don't have more than that.

The rest seems to work fine.

Environment:
- Drupal 7.17
- PHP 5.3.8
- MySQL 5.5.16
- Apache/2.2.21

I would also like to request an addition of an id attribute to the iframe. I needed it for the API, so I added like this:

  $output = '<iframe id="player-' . drupal_html_class($id) . '" width="' . $dimensions['width'] . '"
    height="' . $dimensions['height'] . '" src="' . $src . '" 
    frameborder="0" allowfullscreen></iframe>';

Cheers,

guschilds’s picture

@Tim Jones Toronto

I believe it failed because you've attempted to apply the patch to the 7.x-1.0 release rather than the latest 7.x-1.x branch. Please try:

  1. install Drupal from scratch
  2. cd to sites/all/modules
  3. run git clone --recursive --branch 7.x-1.x http://git.drupal.org/project/youtube.git
  4. Download the patch attached here and place it into the new youtube directory
  5. cd into the new youtube directory
  6. run git apply -v youtube-parameter-additions-1571420-16.patch
  7. enable the module, create a YouTube field on a content type, create a piece of content with a value in that field
  8. test the parameters via display settings on that field and the global 'YouTube settings' via Configuration

@enzipher

I was able to reproduce your issue. If you are already using the code on an existing field before applying this patch, you'll need to clear cache before the use of these parameters take effect, I believe to re-register the information in youtube_field_formatter_info().

I've also added the ID attribute to the iframe as you requested in #15. The option to customize it is only available when the JS API has been enabled with the global module settings.

Please test the patch attached here rather than retesting #10.

Thanks!
Gus

guschilds’s picture

I made a commit to remove a lot of unnecessary white spaces and unfortunately the patch from #16 no longer applies because of it. I rerolled the changes from it into the patch attached here. Please use it with the instructions from #16. Step 6 will now need to be git apply -v youtube-parameter-additions-1571420-17.patch. Thanks!

guschilds’s picture

Anyone coming across this thread who would like to force players to always default to HD video, please see #1864920: Add ability to default to HD video. As mentioned there, I'm not planning on committing that code because it isn't recommended by YouTube. If enough folks feel otherwise, perhaps we'll reconsider.

Still waiting for reviews on #17 (see #16 when doing so)

Thanks,
Gus

tonypbarker’s picture

Hi Gus

Really confused over what version to try to apply the patch to. The active version this thread refers to is alpha2, 7.x-1.0 is the latest version at http://drupal.org/node/1377990/release?api_version[]=103 .

I have always applied patches using Mac terminal and never used git (I need to get into it I know).

I've tried alpha2 and 1.0 and both have failed.

http://git.drupal.org/project/youtube.git gives:

Not Found

The requested URL /project/youtube.git was not found on this server.
Apache/2.2.3 (CentOS) Server at git.drupal.org Port 80

Maybe this is why no-one has reviewed. Is it possible to commit the version we need to apply the patch to?

guschilds’s picture

Version: 7.x-1.0-alpha2 » 7.x-1.0
FileSize
13.75 KB

My apologies. The instructions in #16 refer to testing the latest 7.x-1.x code. I should have instead created the patch to be applied to the 7.x-1.0 release, like you and others have previously tried.

I re-rolled the patch from 17 to apply to the 7.x-1.0 release available on the main project page. Hopefully this makes it easier to test and will encourage others to jump back in on this. To apply it:

  1. download the attached patch to the youtube/ module directory
  2. run git apply -v youtube-parameter-additions-1571420-20.patch
  3. clear cache before testing

Please see the original issue description for more information on what all should be tested.

Thanks,
Gus

tonypbarker’s picture

Hi Gus

It patched fine but threw up these errors on the manage display page. Also, what I really need is to be able to set a max width as a % ideally with a relative height, which doesn't seem to be supported.

Thanks again, Tony

Notice: Undefined index: youtube_showinfo in youtube_field_formatter_settings_summary() (line 292 of /home/thestand/public_html/sites/all/modules/youtube/youtube.module).
Notice: Undefined index: youtube_controls in youtube_field_formatter_settings_summary() (line 293 of /home/thestand/public_html/sites/all/modules/youtube/youtube.module).
Notice: Undefined index: youtube_autohide in youtube_field_formatter_settings_summary() (line 294 of /home/thestand/public_html/sites/all/modules/youtube/youtube.module).
Notice: Undefined index: youtube_iv_load_policy in youtube_field_formatter_settings_summary() (line 295 of /home/thestand/public_html/sites/all/modules/youtube/youtube.module).

guschilds’s picture

OrangePunch,

It sounds like you may not have cleared Drupal's cache after applying the patch..? This can be done at admin/config/development/performance.

You're right, though. What you're trying to accomplish is not supported in this patch or module. With your mention of a percentage value for max-width, are you attempting to have a responsive embed? If so, a quick Google found a few possible solutions:

It seems like both require a wrapper div around the iframe embed. Perhaps the default <div class="field-item even"> markup around the field's value could be used.

If those don't help, you may have to use CSS and/or JavaScript/jQuery on the video player to dynamically alter the size-related attributes. This may be tough because it doesn't look like 'height = auto' or anything similar responds well when width has a % value.

Hope this helps.

Gus

tonypbarker’s picture

Gus

Just to let you know, clearing cache worked and all seems to be working as it should.

Thank you for going way beyond the call of duty with your response. Trying to grab anything to work with in CSS hasn't worked so far.

For now I'm just using small players which fit mobile. I think a long workaround (for now) may be to create two views with media queries to dictate which view is displayed.

I may set some time aside to get stuck into this properly though, because I'm sure it would be a very popular feature.

guschilds’s picture

Status: Needs review » Closed (works as designed)

This issue became too complex for the intended simplicity of this module and can't possibly accomodate all use cases.

For anyone looking to customize the parameters attached to the URL of their YouTube embed, try overriding the theme function:

  1. Open youtube.theme.inc and copy the entire theme_youtube_video() function.
  2. Paste it in your theme's template.php file (it is also possible to do this in a module, but that requires a bit more effort).
  3. Replace 'theme_' in the beginning of the function call with your theme's machine name (keep the underscore). Save and clear cache.
  4. Add to the query array about 2/3 through the function. Whatever you add will be appended to the video's URL.

For example: $query['option'] = 'value'; or $query['autohide'] = '1';.

Voila!

You can then use additional conditional statements with $variables to accomodate all the crazy use cases of certain parameters only taking effect in certain situations. If you need help with this, feel free to open a quick issue.

References:

jenlampton’s picture

Status: Closed (works as designed) » Needs review

Changing this status back to needs review because I'd love to include the patch in #17 (or maybe just part of it?) in the next release if we can get it tested & approved.

Instructions as follows:

  1. install Drupal from scratch
  2. cd to sites/all/modules
  3. run git clone --recursive --branch 7.x-1.x http://git.drupal.org/project/youtube.git
  4. Download the patch attached in #17 and place it into the new youtube directory
  5. cd into the new youtube directory
  6. run git apply -v youtube-parameter-additions-1571420-17.patch
  7. enable the module, create a YouTube field on a content type, create a piece of content with a value in that field
  8. test the parameters via display settings on that field and the global 'YouTube settings' via Configuration

Just to clarify our working process, this *issue* was opened against the 1.0 version of this module. But *all* patches for the 7.x branch of this module, will be created against the 7.x-1.x-dev release, and should be tested there. I'll see if I can't get the dev version to appear in the Version select list - then we can update an issue to reflect the dev version once we have patches to test. Hopefully that will clear things up a bit :)

DotmanBlue’s picture

I came across this tool (http://embedresponsively.com) and was able to use the code in the theme_youtube_video() function override in my template.php.
The portion I replaced is at the bottom of the function:

$output = '<style>.embed-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; width: 100% } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class=\'embed-container\'><iframe id="' . $playerid . '" src="' . $src . '" 
    frameborder="0" allowfullscreen></iframe></div>';

The display size won't apply anymore since this removes the size options from the output. So far it seems to work great.
Hope this helps.
Thanks.

guschilds’s picture

The suggestion in #26 follows the same technique I linked to in #22. Glad it works for you, but it seems a bit unnecessary to override the theme function to add inline styles. As long as you've got a wrapper container (such as .field), you could just add the CSS to the theme, using that wrapper instead of .embed-container. For Sass folks, here's a handy mixin I've been using lately:

@mixin responsive-video-iframe($iframe-container) {
  #{$iframe-container} {
    overflow: hidden;
    position: relative;
    padding-bottom: 56.25%;
    height: 0;

    iframe {
      border: none;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  }
}

Responsive embeds is a bit separate from what this issue is really about, though. If anyone could give jenlampton's suggestion in #25 a shot it would be much appreciated!

guschilds’s picture

For anyone interested in the responsive behavior discussed in this thread, I've created a handy patch in #2 of #2058397: Respect percentage based dimenstion.. I'd love to get it committed if it fulfills an increasingly common need.

Once again, #25 is still waiting review!

hitfactory’s picture

Patch in #17 doesn't apply cleanly to 7.x-1.x-dev as per instructions in #25, but patch in #20 does apply cleanly to 7.x-1.0.

So re-roll needed, but aside from that, can confirm everything works as expected.

guschilds’s picture

Version: 7.x-1.0 » 7.x-1.x-dev
FileSize
13.36 KB

Thanks for testing! Attached is a re-rolled patch for 7.x-1.x for use per instructions in #25. Could you confirm it works just the same?

hitfactory’s picture

There were errors on the Manage Display pages like so:

Notice: Undefined variable: parameters in youtube_field_formatter_settings_summary() (line 301 of sites/all/modules/youtube/youtube.module).

Here is an updated patch with everything including the fix.

guschilds’s picture

Status: Needs review » Reviewed & tested by the community
FileSize
13.34 KB

Thanks for your help with testing and re-rolling.

I seem to have put the $parameters array in the wrong place in #30's re-roll. #31's patch copied it to where necessary, but also kept it where I'd accidentally added it. The attached patch removes it from there. That's the only difference.

I'm going to go ahead and mark this as RTBC per your tests in #29 and #31. I also just tested all of the options once again. Perhaps now it can be deemed worthy for the next release, as mentioned by jenlampton in #25.

NancyDru’s picture

I was working a similar patch when I found this. Personally, I hate single checkboxes, so I used No and Yes radios, which are, at least to me, far more obvious in their value.

In the theme code, there is

  if ($showinfo) {
    $query['showinfo'] = '0';
  }
  if ($controls) {
    $query['controls'] = '0';
  }
  if ($autohide) {
    $query['autohide'] = '1';
  }

The if structure is totally superfluous, we can just do

    $query['showinfo'] = $showinfo;
    $query['controls'] = $controls;
    $query['autohide'] = $autohide;
NancyDru’s picture

I agree that this is good to go as-is. While I'd prefer a few minor changes, we can do that later. I hope someone is thinking about "thumbnail".

guschilds’s picture

Status: Reviewed & tested by the community » Fixed

Thanks to everyone's help on this with code, testing, and feedback! #32's patch has finally been committed and will be in the next release.

For anyone that may come across this in the future, see the Configuration portion of the README.txt for more on how to use these options.

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

Anonymous’s picture

Issue summary: View changes

Updated the correct href="https://developers.google.com/youtube/player_parameters" link. Old one pointed to a non-existent href = ("YouTube Embedded Player Parameters")

TWD’s picture

I am doing some work on extending this further.

I want the user who inputs the Youtube URL to also
indicate the start parameter and end parameter as
allowed by the YouTube API
https://developers.google.com/youtube/player_parameters

I can get this to work just fine when I hard code into the YouTube Field Module some
arbitrary start point (e.g. &start=60) and end point (e.g. &end=180) but in order to be useful obviously the user needs to be able to input
these details.

There needs to be two extra text input fields to capture
the two numbers and this data saved to field_data_field_youtube_video table.

I've figured out how to add two additional columns to the table using the hook_field_schema and hook_update_N. But I haven't been able to figure out how to create these two additional input fields in the YouTube Widget and save the information back to the DB table.

Very much a noob at custom module development so any help greatly appreciated.

Some leads here maybe:
https://api.drupal.org/api/drupal/modules!field!field.api.php/function/h...

guschilds’s picture

Hi TWD,

In the future, please open new issues rather than commenting one issues that have been closed for a while.

This functionality extends beyond the module of this scope but I can attempt to provide you with some broad direction on accomplishing what you'd like to do. In addition to adding the two columns using hook_field_schema and hook_update_N, you'll probably want to:

  • Add the start and end input fields to youtube_field_widget_form() using Drupal's Form API.
  • Add the column "keys" under 'youtube_video' in youtube_field_formatter_view() and youtube_theme().
  • Within theme_youtube_video() grab those values from the variables and (if they exist) add them to the query array in the same way that the other options are added.

Hope that helps. Happy coding!