Youtube parameters - black bar

HTML & CSS
1

Hi all,

I’ve posted on here before regarding this issue but it would be really helpful to get some response as to what the issue is…

I have a small portfolio site that embeds a few youtube clips. Simple you’d think.

For consistency, I want them all to appear the same in terms of titles at the top and control bar at the bottom. For the most part they do but for some reason a few of the videos appear with a larger black bar behind the titles at the top (middle clip on the homepage) and 3 others (noticeably) on the ‘VIDEOS’ page. I have played around with the URLs and am aware I can just remove the titles with using the parameter (&showinfo=0).

When I apply this, the top black bar remains. Can anyone explain why? I assume it is how the video has been originally uploaded? Is there a way I can change it to resize to the same as the others? (in terms of height and a slight opacity?)

Please help! It’s a really small thing that the client doesn’t mind but I do!

URL: http://jamesgoodwin.co.uk/index.html

Thanks, Sam

2

The code looks similar for all 3, so one would think they’d look similar

<!-- St Louis Blues -->
<object width="295" height="290" 
	style="float: left;
		padding: 5px;
		margin-right: 7px;
		margin-bottom:5px;
		border:1px dotted #333;">
      <param name="movie" 
	  value="http://www.youtube.com/v/5bwdxPw3qNI&h1=en&fs=1&rel=0&color2=0x2b405b&color2=0x6b8ab6&border=1"></param>
	  <param name="allowFullScreen" value="true"></param>
	  <param name="allowscriptaccess" value="always"></param>
	  <embed src="http://www.youtube.com/v/5bwdxPw3qNI&h1=en&fs=1&rel=0&color1=0x2b405b&color2=0x6b8ab6&border=1"
		width="295" height="290" align="middle" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true"></embed>
</object>

<!-- 2013 Boogie Woogie --> 
<object width="295" height="290" 
	style="float: left;
		padding: 5px;
		margin-right:7px;
		margin-bottom:5px;
		border:1px dotted #333;">
      <param name="movie"
	  value="http://www.youtube.com/v/tx8aWgzYHVw=en&fs=1&rel=0&color2=0x2b405b&color2=0x6b8ab6&border=1"></param>
	  <param name="allowFullScreen" value="true"></param>
	  <param name="allowscriptaccess" value="always"></param>
	  <embed src="http://www.youtube.com/v/tx8aWgzYHVw&h1=en&fs=1&rel=0&color1=0x2b405b&color2=0x6b8ab6&border=1"
		width="295" height="290" align="middle" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true"></embed>
</object>
    
<!-- Grindin the Cows -->
<object width="295" height="290"
	style="float: left;
		padding: 5px;
		margin-right:7px;
		margin-bottom:5px;
		border:1px dotted #333;">
      <param name="movie"
	  value="http://www.youtube.com/v/vN6euOUCb9w&h1=en&fs=1&rel=0&color2=0x2b405b&color2=0x6b8ab6&border=2"></param>
	  <param name="allowFullScreen" value="true"></param>
	  <param name="allowscriptaccess" value="always"></param>
	  <embed src="http://www.youtube.com/v/vN6euOUCb9w&h1=en&fs=1&rel=0&color1=0x2b405b&color2=0x6b8ab6&border=1"
		width="295" height="290" align="middle" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true"></embed>
</object>

Embedded into the post using vBulletin’s youtube bbcode tag (no parameters)

//youtu.be/5bwdxPw3qNI

//youtu.be/tx8aWgzYHVw

//youtu.be/vN6euOUCb9w

3

I’m guessing it’s the differing aspect ratio on the videos. The ones with the smaller black line at the top look like 4:3, while the one(s) with the bigger black line looks like 16:9. For the latter to fit in the boxes you’ve provided, there has to be more black space at the top.

4

Yes, that seems to be it. I notice the second also has a black bar over the slider control. (“letter boxes”)

From https://support.google.com/youtube/answer/1722171?hl=en

Resolutions

YouTube uses 16:9 aspect ratio players. If you are uploading a non-16:9 file, it will be processed and displayed correctly as well, with pillar boxes (black bars on the left and right) or letter boxes (black bars at the top and bottom) provided by the player. If you want to fit the player perfectly, encode at these resolutions:

2160p: 3840x2160
1440p: 2560x1440
1080p: 1920x1080
720p: 1280x720
480p: 854x480
360p: 640x360
240p: 426x240

The YouTube player automatically adds black bars so that videos are displayed correctly without cropping or stretching, no matter the size of the video or the player.

For example, the player will automatically add pillarboxing to 4:3 videos in the new 16:9 widescreen player size. If the player is re-sized (i.e. when embedded on another website), the same process takes place so that 16:9 videos are letterboxed when the player is sized to 4:3. Similarly, anamorphic videos will be automatically letterboxed when shown in either 16:9 or 4:3 sized players. The player can only do this if the native aspect ratio of the video is maintained.

You can adjust the fit of your video in our player after uploading your video by using formatting tags.

According to the page 4:3 results in “pillar boxes” (side black bars) not “letter boxes”, but it’s got to be the ratio affecting the display somehow.