In HTML5, a full-width video exceeds the size of the screen

When I have a video set to full width in a header with the width at 100%, the issue arises with the height. The video is too large, causing the controls to be out of view unless I scroll. Is there a solution to remedy this problem?

<video  width="100%"  controls >
  <source id="mp4" src="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4" type="video/mp4">
</video>

I've attempted setting the height to auto or 100%, but on desktop, the video remains oversized, hiding the controls. Any suggestions on how to resolve this? Is there a way to make the video fit the screen size without requiring scrolling?

javascriptjqueryhtmlcsshtml5-video

Answer №1

To ensure the video maintains its aspect ratio, you can set both width: 100% and height: 100%, or opt for height: 100vh. This will resize and center the video content while preserving its proportions. Just remember to include a background-color to fill any empty spaces:

body {
  margin: 0;
}

.somethingElse {
  position: relative;
  width: 100%;
  height: 50vh;
  background: red;
}

video {
  position: relative;
  width: 100%;
  height: 100vh; 
  background: black;
  display: block;
  outline: none;
}
<div class="somethingElse"></div>

<video controls >
  <source id="mp4" src="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4" type="video/mp4">
</video>

<div class="somethingElse"></div>

Answer №2

The aspect ratio of your video is causing an issue, which is why a scroll bar appears when using 100% width. To avoid this, consider using either a 4:3 or 16:9 ratio for fullscreen videos without sacrificing the dimensions.

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

What is the best way to apply a CSS class to a div element without affecting its child elements using JavaScript?

Currently, I am using JavaScript to add and remove a CSS class through a click event. Within my div structure, I have multiple similar divs. While I can successfully add and remove the class from my main div, I am facing an issue where the class is also ap ...

javascripthtmlcss

Disable image loading for users who have javascript enabled

I find myself caught in a chicken-egg dilemma. The webpage I created contains numerous images that need to be loaded, and so I implemented a script that loads images as the user scrolls, similar to how Facebook or Google Images functions. When the user rea ...

phpjavascriptjqueryajax

CORS issue encountered by specific user visiting the hosted website

I recently developed a bot chatting website using Django and React, which I have hosted on HOSTINGER. The backend is being hosted using VPS. However, some users are able to see the full website while others encounter CORS errors where the APIs are not func ...

javascripthtmlreactjsdjangoweb-hosting

Using .change(); in JavaScript code with jQuery does not trigger a function

Here we have a generic code example for a jQuery function: $(document).ready(function() { if (something) { // This does something } else if (something else) { // This does something else } else { // And this does somethin ...

javascriptjqueryfunctionasp.net-mvc-4

Trigger a jQuery modal by clicking on a cell within a table

As a novice in jquery, I am facing a challenge. I have a table with a column showing the total number of employees in a department. When a user clicks on this column, it should open up a jquery modal displaying a list of employees like EmpA, EmpB, and Em ...

javascriptjqueryasp.net-mvc

Switching between components in vue.js: A beginner's guide

In my project, I created a Dashboard.vue page that consists of three child components: Display, sortBooksLowtoHigh, and sortBooksHightoLow. The Dashboard component also includes a select option with two choices: "Price: High to Low" and "Price: Low to High ...

javascriptvue.jsvuejs2vue-component

Monitoring the modifications of a linked component in React: A guide

I am facing an issue where I need to store the text of a referenced element in an array. My goal is to first display the text of each paragraph element with the "ebookName" class in the console before storing it in the array. However, I have encountered a ...

javascripthtmlreactjs

Layering one canvas on top of another

Here is the code I am working with. With a JavaScript library, I can draw on the first canvas and then merge it onto the second canvas. My question is, how can I make the first canvas stay in place or float, regardless of where I scroll on the second canv ...

csshtmlcanvas

Safari on IOS transition transform feature malfunctions

Every time I try to apply some code to make a div move, for example using the latest iOS Safari browser, it fails to transition between the two rules set. I have experimented with different values other than percentage but still haven't been able to m ...

csssafaricss-transitionsvendor-prefix

ajax data should be considered as a string, not an array

Currently, I am utilizing jquery ajax for transmitting some data to a php file $.ajax({ type: 'GET', url: 'dosomething.php', data: {list:orderNew} }); The above code snippet is responsib ...

phpjqueryajax

Utilize the Discord SDK to broadcast a message to every channel within a server whenever a command is utilized

In the process of development, I have crafted a new command: ! sir snd all -hello Essentially, this particular command instructs to dispatch the message specified after " - " to every channel located on the server where the command is initiated. Here&apo ...

javascriptnode.jsdiscorddiscord.js

Find an element within an array in a separate JavaScript file (leveraging AngularJS)

I am new to AngularJS and decided to create a custom map with my own markers that I defined. To do this, I started by creating a JavaScript file containing an array: var myMarkers=[{ method1='..', methode2='..' },{ method1=&a ...

javascriptarraysangularjsgoogle-mapssearch

What causes Safari to display a black border around resized videos?

I've come across a strange issue while using Safari. Whenever I try to play an MP4 video with dimensions of 1920 * 1080, and resize the Safari window to a width of 937px, something strange happens: https://i.stack.imgur.com/oI50i.png A black border ...

cssvideosafari

Using AngularJS to dynamically load content into Owl Carousel 2

I'm having trouble loading the owl carousel in angularjs dynamic content. Here is the modified html code I am using: <div id="Galeria" owlcarousel class="youplay-carousel gallery-popup"> <a class="angled-img" href="http://www.youtube. ...

javascriptangularjsangularjs-directiveowl-carousel-2

Issues with Mouse Hover/Image Replacement

In this particular example, I am attempting to achieve a simple functionality where an image changes when the mouse hovers over it, and reverts back to the original image when the mouse is no longer hovering. However, despite my efforts, there seems to be ...

jqueryhtmlcss

The addition of a slash between the hashtag and the anchor name by Fullpage.js is causing conflicts with ng-include

My experience with using fullpage.js on a simple site alongside angular directives has been met with an issue. When including a .phtml file, the anchor functionality of fullpage.js stops working as it adds a slash before and after the anchor name. UPDATE ...

javascriptjqueryangularjsfullpage.js

Submitting buttons by using a textbox array is a simple process

I need help figuring out why my buttons are not working on a page I'm creating with around 300 textboxes generated from a foreach loop. While I've successfully been able to write links into the textboxes, I am struggling to read the textboxes arr ...

javascriptphpbuttontextboxsubmit

Discovering the distinction between arrays of JQuery objects

I have a task that requires the following steps: var elems = $('.lots-of-elements') Next, I need to make an AJAX request and then do this: var moreElems = $('.lots-of-elements') Finally, I am looking to identify only the new element ...

javascriptjquery

Retrieving outcome of Solidity contract function using web3-1.0.0-beta.27

I am using web3 1.0.0-beta.27 and the pragma solidity is set to ^0.4.2. contract Charity{ function ping() public constant returns (uint) { return 200; } } Currently, I am compiling and calling it in typescript with: import * as fs ...

javascriptethereumsmartcontractsweb3js

Error: PHP is showing an undefined index error when trying to decode JSON, even though the value

I am feeling quite puzzled. I transferred a key value pair object from jQuery to PHP and successfully alerted it back out. However, when I visit the PHP page, it indicates that the data is either null or an undefined index. Here is my jQuery code: $(&ap ...

javascriptphpjqueryjsonajax