Is it possible to achieve a borderless full screen display with HTML5 video?

I want to display a video in full screen inside a web browser using HTML5 tags.

If you'd like, you can check out my online test and view the source code here:

My issue is that I cannot eliminate the margins (blank borders) around the video, and I'm struggling to achieve a true FULL SCREEN effect.

In the screenshot below, you can see the unwanted margins:

Any suggestions on how to achieve a completely fullscreen display? :-)

By the way, when I double click on the image, I am able to get a true full screen, but I wonder if this involves the flash player. My goal is to be able to view the video in full screen on any device, including smartphones and tablets, without relying on a flash player.

Thank you very much! giorgio

csshtmlhtml5-videofullscreenmargin

Answer №1

If you've reviewed the HTML on your page and found no PHP code with markup, my suggestion would be to set the body margin to zero.

CSS

body{
margin: 0;
padding: 0;
}

It seems like in your CSS, the body has an 8px margin.

UPDATE following the PO comment in this response

To remove the scroll bar, adjust the value of the height property in the inline style of your <video> element in this line

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

Update this line to

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

This should address this specific issue.

P.S. general advice: it's always a good idea to separate your styles from your HTML using an external .css file for easier management and updates to your website's appearance.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips on concealing the divs following the second click and a page refresh

Bootstrap 4 js collapse is working fine, but I am facing an issue. When I click to show a hidden div and then reload the page, clicking again reveals the previously hidden div when it should be hidden. Any suggestions for addressing this problem? ...

javascriptjquerycsstwitter-bootstrapbootstrap-4

Can multiple print buttons in different modals be connected to individual divs within their respective modals?

I am currently developing a webpage using the Foundation 5 framework that features a table of information. Each row in the table contains a link that, when clicked, opens a specific modal displaying detailed information related to that row. I want to add a ...

javascriptjqueryhtmlcsszurb-foundation

What is the best way to create a dot animation using CSS or JavaScript?

https://i.sstatic.net/60Hym.gif This particular GIF is sourced from Dribbble. I attempted to create a demo using pure CSS. Below are snippets of my code: @keyframes circles{ 0%{ transform: scale(0) rotate(150deg); } 100%{ transform: scale( ...

javascriptcss

Tips for implementing a CSS loader exclusively on a particular section of your content

Is it possible to apply a loader image to a specific section of content on a webpage? All the tutorials I've come across for loader images focus on applying them to entire webpages. However, I am looking to implement a simple loader only to a specifi ...

javascriptcssclassloader

Troubleshooting Angular 2 with TypeScript: Issue with view not refreshing after variable is updated in response handler

I encountered a problem in my Angular 2 project using TypeScript that I could use some help with. I am making a request to an API and receiving a token successfully. In my response handler, I am checking for errors and displaying them to the user. Oddly en ...

javascripthtmlangulartypescript

Error: The object does not have a method called 'to top scroller' and it is causing an uncaught type error

A plugin was obtained from the following link: http://www.jqueryscript.net/other/jQuery-Plugin-For-Smooth-Scroll-To-Top-Bottom-scrollToTop.html.i and the code was attached below in the index.html file. Several jQuery plugins were attempted, but none work ...

javascriptjqueryhtmlcss

CSS - How child elements can appear transparent over their parent

Is it feasible to create a scenario where a child element has the ability to see through its parent, displaying the background image only within the child and not in the parent element as illustrated below? Can this be achieved using CSS or any other meth ...

htmlcss

Displaying a success dialog after closing a Bootstrap modal

I have set up a bootstrap modal containing a form. Upon submitting the form, the form content is hidden and a bootstrap alert message is displayed. However, upon clicking the bootstrap popup, the same alert message is shown in the popup instead of displayi ...

jqueryhtmlcsstwitter-bootstrap

Transform cursor with jQuery on hover and click events

Currently, I'm implementing an image zoom feature, and I want to incorporate two different mouse states for hover actions. #1 Upon hovering over the containing <div>, the cursor should change to a 'plus' symbol. #2 Once the user cl ...

jquerycsshovercursortoggle

Guide to Utilizing Roboto Light/Thin Font from Google Fonts on Chrome

I'm struggling with using the Roboto fonts in Chrome, specifically with getting Condensed and Thin/Light font weights. I have downloaded all three complete fonts: @import url(https://fonts.googleapis.com/css?family=Roboto:100,100italic,300,300italic, ...

cssgoogle-chromefonts

Using JSON response directly in loaded HTML in Angular 2 is a straightforward process. Follow these steps to

As I delve into Angular 2 and explore its components, one question that arises is how to display data received from a server in JSON format on an HTML page. In Angular 1.x, we could directly assign a JSON object to a variable and use it in HTML using the & ...

htmljsonangular

jQuery AJAX - Unauthorized Access Error Code 403 Caused by CORS Issues

Attempting to replicate the following function, which is sourced from immowelt.de. The js-file can be found at . Replicated Function: a.ajax({ type: "POST", url: IwAG.Vars.acSource ? IwAG.Vars.acSource : j, contentType: "appl ...

javascripthtmljquery

Struggling to find the width of an SVG text box or add line breaks after a specific number of characters?

I am currently working on creating an SVG text box using the amazing Raphael library. The content inside this text box comes from a dynamic string that is extracted from an XML document. There are times when this string turns out to be longer than the can ...

javascripthtmlsvgraphael

Border lines will appear in the HTML table after every 3 columns

Is there a way to style every set of 3 rows in a table with a red outline using CSS? See example image In my table, "test", "image", and "click" each represent a row. I would like to distinguish these groups by adding a red outline. Does anyone know how ...

htmlcssbordertr

What causes the Footer to appear as a floating element in Tailwind CSS?

I've implemented the tailwind CSS footer into my NextJS project to display fetched data. However, I encountered an issue where the footer only floats when there is less data present. To address this problem, I created a separate footer file within my ...

htmlcssreactjsnext.jstailwind-css

Positioning of the dropdown in Material UI AutoComplete menus

Is there a way to turn off autocomplete auto position? I would like the autocomplete options to always appear at the bottom. Check out this link for more information! ...

javascriptcssreactjsmaterial-ui

Is it possible to change the button class within a div while ensuring only the last one retains the change?

Here is a code snippet I'm using to switch between classes for buttons: $('button').on('click', function(){ var btn=$(this); if(btn.attr('class')=='tct-button'){ btn.removeClass('tct-button ...

javascriptjqueryhtmlcss

Determining the dimensions of a div with a scrollbar using Jquery

Is there a way to get the width and height of a div with scroll that includes both visible and hidden content using JQuery? If anyone has a solution for getting these values, please share. <div id="area" class="divLeftCem area"> <div id="pan ...

javascriptjqueryhtmlcss

A popular method for showing a div when another div is scrolled out of view, similar to the Timeline feature on Facebook

I have found Facebook's new timeline feature to be quite impressive. I particularly like the small menu that appears as you scroll down a profile, offering options to view the timeline or more information about the user. It only shows up when you reac ...

jqueryhtmlcss

Hiding an element with display: none will prevent the hover effect from

I have integrated a CSS dropdown menu from this link: https://www.w3schools.com/css/tryit.asp?filename=trycss_dropdown_button Additionally, I am utilizing jQuery .on("click", event with an AJAX call. Following the successful AJAX call, I am using the foll ...

jquerycssdisplay