Percentage width/height breaks player

Removing width in the $settings_str in video_embed_field.handlers.inc has worked, the unencode percent from the width seems to be the issue.

Sorry to rush you but can you explain this fix? I'm having the same problem with width set to 100%, I'm getting a black frame only. In pixels it's OK. I removed (or thought I did) the width settings in in video_embed_field.handlers.inc but this did not fix it for me. The strange thing is that it all seemed to work fine last week and I don't think I have updated the module since then.

Great, that worked for me. Thanks! I really only had to use

iframe {
  width: 100%;
}

- leave the width empty and set the height in settings. Videos look fine with correct aspect ratio while playing and the iframe is responsive.

Fixed this with this change in video_embed_field.handlers.inc line 186:
$settings_str = urlencode (_video_embed_code_get_settings_str($settings));

It is kind of strange that this string was not already urlencoded.

As @eyjolfur12 said the problem is with the options string not being encoded. I been working on this and came here to create an issue for it and found there already is one! Here is a patch to fix it.

What I didn't look into in the Git history was to see how this was broken. In Beta5 it worked.

I have fixed this with this change in video_embed_field.handlers.inc line 186:
$settings_str = urlencode (_video_embed_code_get_settings_str($settings));

and the change in CSS

/* Style to make sure the fields are the right way */
.wrapper {
position: relative;
padding-top: 56.25%;
}
iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;

Thanks to eyjolfur12 and jzavrl

I am marking this. Well the patch at RTBC. I just deployed this on my production website with over 950 youtube videos embedded in five years of video blogs. It works :-D I did not need CSS changes to fix the problem.

You can see the patch in action here: https://www.swingsurgeon.com/daily-video-tips/

Now I see that I can`t Hide video annotations when
I have fixed this with this change in video_embed_field.handlers.inc line 186:
$settings_str = urlencode (_video_embed_code_get_settings_str($settings));

But I look around and found the next module
https://www.drupal.org/project/fitvids

I the /sites/all/libraries/ unpack and put the folder.

Go to admin/config/media/fitvids

and in the Custom iframe URLs put

https://www.youtube.com
http://youtu.be
https://vimeo.com/
https://www.kickstarter.com
http://www.dailymotion.com

Return the original Video Embed Field

Go to admin/config/media/vef_video_styles

In the Player Width I have put 710
in the Player Height I have put 400
for youtube and vimeo
For youtube
In the Display annotations
Hide video annotations.

This works perfectly with Width and Height 100%

Vimeo example
http://www.mario.mk/muzika/874
Youtube example (this video have annotations but not in my blog)
http://www.mario.mk/film/1364/captain.america.winter.soldier.2014

I've got my fields set at 100% and the results are "responsive videos" that maintain their ratio when the window is reduced. But how can I make them fill the entire line on all devices?

On laptop: looks great
On wide desktop screen: only fills about half of the page
(see screenshots)

I try making the dimensions 200% or 300% or whatever but this just makes the videos overlap and look really weird with a lot of black space (see screenshot).

Don't hide the patches...

@trumpetmercenary that is beyond the scope of this issue. The issue was the "%" was breaking the player due to it not being URLencoded. Your question is more along the lines of styling and iframes.

Yes I know is unnecessary more JS, but work perfectly on mobile tablets PC with 100% Width and Height.

@jzavrl I have not replicated the problem with the annotations. I can test it today. If it is broke that should be an easy fix because it is part of the URL query string sent for the iframe and I know exactly where that is generated now after 45 minutes of walking code!

My patch fixes the % in the URL. Now is the width and height necessary? That I don't really know. It works with and without it being defined. I am of the mentality, "if it isn't broken, don't fix it". The patch fixed the non-encoded % symbol so the module is back to working the way it was before the upgrade.

I've had the same issue, it was working a week ago and now the embed is just blank. I had a percentage width on the video style, of which I have removed and left this value blank, instead I have added width: 100%; to the CSS for the iframe. This appears to resolve the issue for the time being.

The patch I uploaded fixes the "%" problem for the module. It was a simple URL encoding issue.

Patch committed to 7.x-2.x
Thank you

I've update to the last release and the pourcent not working well. I'm using the module with colorbox and the height part seems to have a problem. Here some example of link.

No width and no height : vef/load/63712fbb69ae4ce8f330b8a9a1214958&width=&height=5
Width 100% and height 360 : vef/load/63712fbb69ae4ce8f330b8a9a1214958&width=100&height=365

A 5 value is always available.

Thanks

@kiero63: the problem is in video_embed_field.module:563

'height' => $data['height'] + 5,

if $data['height'] have % value

url encoding the query string parameters breaks them. See http://codepen.io/ulic/pen/wKzode as an example. The setting that doesn't work in my example is "showinfo" (which hides the title, watch later, and share icons). It seems to me that width and height shouldn't be included in the query string anyway as they are not valid parameters per https://developers.google.com/youtube/player_parameters. I would suggest pulling them out of the settings variable just like what is done with the class setting, so something like:

  // Set these to variables to avoid adding them to URL param string.
  $class = $settings['class'];
  unset($settings['class']);
  $width = $settings['width'];
  unset($settings['width']);
  $height = $settings['height'];
  unset($settings['height']);

  // Construct the embed code.
  $settings['wmode'] = 'opaque';
  $settings_str = _video_embed_code_get_settings_str($settings);

  $output['#markup'] = '<iframe class="' . check_plain($class) . '" width="' . check_plain($width) . '" height="' . check_plain($height) . '" src="//www.youtube.com/embed/' . $id . '?' . $settings_str . '" frameborder="0" allowfullscreen></iframe>';

FYI

• bug issue to fix #25 #2580459: Not all video style options are being applied
• feature issue for responsive video #2427341: Auto detect device width

Sorry to resurrect this after 6 years (maybe I should have created a new issue?), but the same fix needs to be applied to Vimeo embeds. Patch attached.