Embedding videos on responsive layout

Hi,

I am trying to embed a YouTube video on my responsive layout and I found the following tutorial:

http://webdesignerwall.com/tutorials/css-elastic-videos/ - http://webdesignerwall.com/demo/elastic-videos/ (demo)

It seems to be working fine except one small issue. When you narrow down the browser window and start the video, black bars will appear above and below the video as you can see in the following image:

I use the same code given in the tutorial. Is it possible to get rid of the black bars?

I’m by no means a CSS expert - but…

You should be able to change the

padding-bottom: 56.25%; /* 16/9 ratio */

part to fit your aspect ratio. There is nothing here that detects the aspect ratio of the video though so you need to know it up front.

Someone else can likely expand on this. :slight_smile:

Also check out this post :slight_smile:

@Nail Yener — which browser are you viewing this in? Does the problem happen for you on the webdesignerwall, or just on your site? If just on your site, can you post a link?

The black bars are displayed on the demo link and on my page as well. I have the same code. I am viewing on Chrome and Firefox.

That’s odd—I don’t get the black bars in either of those browsers.

Depends on resolution I believe. (I don’t get the black bars either)

Really? Interesting. Just to make sure we are doing the same thing, here is the steps that I follow:

  1. Open the demo link.
  2. Narrow down the browser window to about 20% width of the screen.
  3. Click play on the video.