Tips on ensuring a <video> element occupies the full height and width of the screen

I am currently working on an Angular 6 project where I am live streaming a user's webcam to an HTML element.

My goal is to simulate the experience of capturing a video or photo on a mobile device. However, the size of the video is currently small. I would like to adjust it to fit the entire available height/width without distorting or stretching it, if possible.

.component.html

<div fxFlexFill fxLayout="column" class="videoContainer">
    <video #video autoplay></video>
</div>

<button class="lv-button gradient-theme" (click)="start()" [disabled]="started">Start</button>

.component.scss

video {
    border: 1px solid black;
    height: 80vh;
}

button {
    padding: 12px 25px;
    color: white;
    font-size: 15px;
    font-weight: 300;
    width: 100%;
}

https://i.sstatic.net/gsc95.png

Currently, the screen is black because I covered the camera. I want the display to fill the entire height of the container without stretching. I have experimented with using object-fit: cover, but this results in cutting out/zooming in the video.

htmlcssangularvideogetusermedia

Answer №1

To resolve your issue, make use of the object-fit property in this scenario.

.container {
    width: 100%;
    height: 100%;
    position: relative;
    object-fit: contain;
}

Answer №2

Creating a Fullscreen Responsive Video Background

body {
  margin: 0;
  padding: 0;
  /*  Adding background fallback for older browsers or slower connections  */
  background: #333;
  background-attachment: fixed;
  background-size: cover;
}


/* The key styling rule for fullscreen video */

#video-background {
  /*  ensuring video covers the entire screen  */
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
}


/* Additional styling for content overlay */

article {
  /*  adding a decorative border  */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 10px solid rgba(255, 255, 255, 0.5);
  margin: 10px;
}

h1 {
  position: absolute;
  top: 60%;
  width: 100%;
  font-size: 36px;
  letter-spacing: 3px;
  color: #fff;
  font-family: Oswald, sans-serif;
  text-align: center;
}

h1 span {
  font-family: sans-serif;
  letter-spacing: 0;
  font-weight: 300;
  font-size: 16px;
  line-height: 24px;
}

h1 span a {
  color: #fff;
}
<link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>

<!--  Content Overlay  -->
<article>
  <h1>Responsive Video Background</h1>
</article>

<!--  Video with muted autoplay for performance, including image fallback  -->
<video autoplay loop id="video-background" muted plays-inline>
  <source src="https://player.vimeo.com/external/158148793.hd.mp4?s=8e8741dbee251d5c35a759718d4b0976fbf38b6f&profile_id=119&oauth2_token_id=57447761" type="video/mp4">
</video>

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

Adjust the component's input value using a different component

Let's talk about two components in this scenario - HomeComponent and UserComponent. The UserComponent is a child of the HomeComponent and has the following structure: UserComponent.html: <form [formGroup]="form"> <div style="display:block ...

angulartypescript

Using CSS grid for optimal responsive design

Today I delved into the world of CSS grid and instantly saw its potential in creating stunning layouts. However, one aspect that has me perplexed is how to adapt the grid for mobile devices. Below is an example that functions perfectly on a desktop screen ...

htmlcssmedia-queriescss-grid

Is there a copyright concern regarding CSS?

There are countless websites that spark my creativity. If I am inspired by a particular design, CSS, or JavaScript on one of these sites, am I allowed to copy it to my local folder and use it? For instance, let's say I come across a website called xy ...

css

Fixed Div Columns on the Far Left

My goal is to create a left-floating div that remains fixed in place while allowing another div to float next to it, creating two columns that stay intact when the page is scrolled. After researching, it seems like fixed position and floating elements don ...

css-floathtmlcss-position

Erase jQuery from the text

I am struggling with splitting or removing text from a filename. For example, if I have filenames like: 200726100_50-0002.JPG 230514008_60-0001.JPG The desired result should be: 230514008_60.JPG 200726100_50.JPG Am I not using the split function cor ...

javascriptjqueryhtml

What could be causing this issue with the jQuery CSS not functioning properly?

When I come across the following HTML snippet: <div id="map"> <div class="elem"> hey1 </div> <div class="elem"> hey2 </div> <div class="elem"> hey3 </div> </div> In JavaScript: va ...

jquerycss

Is there a method to categorize distinct "continuing" numbered list items in order to show that they are interconnected?

There is HTML code that I am currently dealing with, and it looks like this: <ol> <li>...</li> </ol> ... content <ol start="2"> <li>...</li> </ol> ... more content <ol start="3"> <li&g ...

html

Styling the ::selection inline with CSS allows for custom

I have a div element that I would like to customize the text selection style for. Currently, setting the style using CSS works perfectly: <div>Text text here</div> <style> div::selection { background: #FFF; color: #0 ...

htmlcsstextselectioninline-styles

"JQuery enables the dynamic cloning of form elements, allowing for attribute adjustments that can be easily reverted

I've been grappling with a puzzling issue recently. I used jQuery to clone a form and assigned IDs to the form elements to increase incrementally with each clone. However, following server validation errors (using Laravel), the IDs of the elements rev ...

htmljquerylaravelforms

What steps can be taken to avoid special characters in ion-input fields?

When inputting special characters into the field used for storing the alphanumeric serial number, they are accepted. I need to prevent special characters from being entered in the input field. <ion-input [(ngModel)]="serial_number" (ngModelCha ...

javascriptangulartypescriptionic-frameworkionic5

What steps are involved in uploading data to serve as a filter while running a PHP script to retrieve data from an SQL database?

Currently, I am retrieving data from a PHP file using miniAjax. The code snippet below demonstrates how the process begins: microAjax("genjsonphp.php", function(data) { var json = JSON.parse(data); var points = json; //code continues In the c ...

javaphpjavascripthtmlajax

What could be causing Media-Query to fail when using the max-width media feature?

I recently added a max-width media feature to my code, but for some reason, the colors aren't changing when the width is less than 300px. I've been trying to inspect elements on my laptop to troubleshoot the issue. Additionally, I've made su ...

htmlcssmedia-queries

Exploring the utilization of CSS host selectors with Angular4 to target direct child elements

Within my app.component.css file, I currently have the following code snippet: * ~ * { margin-top: 24px; } This rule actually adds some top margin to all elements that come after the first one. However, this is not exactly what I intend to achieve. My ...

cssangularcss-selectors

The sticky table header is being covered by a disabled HTML button, while the active buttons are not visible

I'm currently working on a website using Bootstrap 5 as my framework. The issue I'm facing is that when scrolling down the page and keeping the table header stuck to the top, the disabled button ends up showing over the header. I attempted to us ...

htmlcssbootstrap-5

Elements within the Div are perfectly aligned in the center and restricted from moving to either the left or right edges of the

Currently, I am developing a project similar to Gmail. In order to achieve this, I need to design a div container that consists of various components such as Inbox, Send, Draft, etc. However, when I attempt to move these components around, the icons disapp ...

cssreactjsreact-hooks

Ways to resolve the Ionic v1 deprecation error problem

I am facing a problem with an Ionic v1 deprecation error, causing it to not work properly. ionic build ios ionic emulate android The basic commands are failing to produce the desired outcome. Is there a way to resolve this issue? Note: My application is ...

angularionic-frameworkionic2cross-platform

Discovering the top method to locate an Error Modal Message using Selenium

I am looking to automate a specific process that involves an Error modal popping up. I am trying to use Selenium to capture this modal which appears in multiple instances. So far, I have attempted to locate it by XPath without success. Using CSS selector o ...

javahtmlcssseleniumxpath

unable to retrieve access-token and uid from the response headers

I am attempting to extract access-token and uid from the response headers of a post request, as shown in the screenshot at this https://i.sstatic.net/8w8pV.png Here is how I am approaching this task from the service side: signup(postObj: any){ let url = e ...

javascriptangulartypescript

What is the code to incorporate a color using PHP?

Question: Is there a way to indicate approval with green color and decline with red color? I've searched for a solution but couldn't find one. PHP Code: <?php if(isset($_POST['approve'])) { $msg = "Approved"; ...

phphtmlcssdatabase

Turn off automatic downloading of embedded frame content in Safari for iOS

I am encountering an issue with a modal that displays a PDF and offers two options - one to print and one to download. The download option uses a blob with content-type: application/octet-stream, while the print option utilizes a blob with content-type: a ...

javascripthtmliosreactjssafari