CODEWITHSUNDEEP
htmlcssiframeyoutube
Vulkan
Vulkan

Reputation: 1074

How can I remove the white space inside youtube iframe?

I'm using this snippet to embed a youtube video to my website: http://jsfiddle.net/EJ6jZ/3/

HTML

<div class='embed-container'>
<iframe src='http://www.youtube.com/embed/KRaWnd3LJfs' frameborder='0' allowfullscreen></iframe>   
</div>

CSS

.embed-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; max-width: 100%; height: auto; } 
.embed-container iframe, 
.embed-container object, 
.embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

The problem is that I just can't remove the white space around the video.

I know that the method is adding this line somewhere:

display: block;

But, this is my first day coding in CSS.

It is painful. I know the problem I know the solution but I can't fix it.

Upvotes: 0

Views: 2174

Answers (1)

Jason
Jason

Reputation: 106

The white space around this video is caused by the default margin (8px) on body

To remove add:

body {
    margin: 0;
}

Upvotes: 1

Related Questions