HTML5 Video: full screen without borders?

Question

I would like to show a video inside a web browser, in full screen using HTML5 tags.

Here my online test, that you can run and see the source code:

http://rospo.altervista.org

My problem is that I am unable to avoid margins (blank borders), in other words I can't obtain a real FULL SCREEN

In the screeenshot here below I show the unwanted margins:

screenshot

Any idea to get a full-full-screen ? :-)

BTW, double clicking on the image I get finally a real full screen but I think in this case come in the game thge flash player, isn't it ? The point is that i would like to visualize the full screen video also froma a smart/phone/tablet browser (without any flash player ....)

Many thanks! giorgio

SULTAN SULTAN · Accepted Answer · 2014-10-05T14:20:12

I've checked the HTML in your page and if it doesn't contain any PHP coding with markup, then I would suggest you make the body margin to zero

CSS

body{
margin: 0;
padding: 0;
}

I believe in your css you have the page body with 8px margin.

UPDATE after the PO comment in this answer

to get the scroll bar out, you need to modify the height property value in you inline style of your <video> markup in this line

<video autoplay="" loop="" controls="" style="width: 100%; height: auto;">

the line should be

<video autoplay="" loop="" controls="" style="width: 100%; height: 100%;">

I believe this should solve this precise problem.

P.S. general advice: always separate your style from your HTML in an external .css file to make it easy for you to change and update the look and feel of your website.

HTML5 Video: full screen without borders?

1 Answers