How to remove Youtube Borders (top and bottom)

Design help General
1

Other videos on Youtube I embed are desired size, but the one I want to embed has big black widescreen borders above and below - not on Youtube, just once embedded.

Top padding is unchangeable do to being responsive it says. Bottom padding just distorts size. Playing around with advanced settings seems to make no difference.

2

Hey SirJazz! Can you publish and post a subdomain so we can see what you mean exactly? It’s hard to visualize.

4

What you can do is create a Div Block and drop the video inside of the Div Block and give that a class and percent width. Then you don’t have to add any styles to the actual video. Like so:

Make sure you remove the width and height from your video element. The video defaults to 100% of its container and it keeps its original aspect ratio (right now it’s something like 4:3).

For the tablet device I would keep your text in the left column for simplicity instead of adding styles to move it to position. Remove all your styles and try to keep your styles minimal. Its easier to override those styles as you go down to the different media queries.

Let me know if this helps.

1 Like
5

Oh also, if you want to remove the borders and things you’d have to embed the Youtube video and change the settings inside the embed code. Here are some details on all the options:

Parametry odtwarzacza  |  YouTube IFrame Player API  |  Google Developers

6

I’m not sure this is quite what you want. It might be. I looked at your site and saw a related problem that I solved the other day. Hope this helps.

Problem: get rid of all YouTube chrome except the play button. That means all top and bottom borders.

Solution: Add the showinfo parameter to the URL in the embed code and set it to 0.

You can see the result here

This is the default embed code for that video.

<iframe width="640" height="360" src="//www.youtube.com/embed/Et-E3r4r37A?rel=0" frameborder="0" allowfullscreen></iframe>

Here is my modified embed. All that’s changed is the showinfo=0 attribute on the src attribute

<iframe width="640" height="360" src="//www.youtube.com/embed/Et-E3r4r37A?rel=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
7

Thanks for help guys. OK the problem was,

  1. Youtube gives 640x480. I needed 640x360 to remove big black borders at top and bottom.
  2. Changing height from 480 to 360 doesn’t do anything using Video Embed.

Solution: I used normal Embed, then changed size in code to 360.

The only minor problem I see is setting drop shadow to video leaves gap at bottom.