Improving video display in Javascript: ensuring full screen width and height without sacrificing picture quality

I am facing an issue with setting a video screen to 100% width and 100% height. On larger resolutions, the height does not display properly and gets cut off from view.

Even though the following aspect ratio works, it causes black bars on the left and right:

window.onresize = function(){
  var aspectRatio;
  if (remoteVideo.style.opacity === '1') {
    aspectRatio = remoteVideo.videoWidth/remoteVideo.videoHeight;
  } else if (localVideo.style.opacity === '1') {
    aspectRatio = localVideo.videoWidth/localVideo.videoHeight;
  } else {
    return;
  }

  var innerHeight = this.innerHeight;
  var innerWidth = this.innerWidth;
  var videoWidth = innerWidth < aspectRatio * window.innerHeight ?
                   innerWidth : aspectRatio * window.innerHeight;
  var videoHeight = innerHeight < window.innerWidth / aspectRatio ?
                    innerHeight : window.innerWidth / aspectRatio;
  containerDiv = document.getElementById('container');
  containerDiv.style.width = videoWidth + 'px';
  containerDiv.style.height = videoHeight + 'px';
  containerDiv.style.left = (innerWidth - videoWidth) / 2 + 'px';
  containerDiv.style.top = (innerHeight - videoHeight) / 2 + 'px';
};

I have tried modifying the code but still face issues where increasing the width results in the height getting cut off. Even when using webkitRequestFullScreen();, the width and height do not render accurately.

window.onresize = function(){
  var aspectRatio;
  if (remoteVideo.style.opacity === '1') {
    aspectRatio = remoteVideo.videoWidth/remoteVideo.videoHeight;
  } else if (localVideo.style.opacity === '1') {
    aspectRatio = localVideo.videoWidth/localVideo.videoHeight;
  } else {
    return;
  }

  var innerHeight = this.innerHeight;
  var innerWidth = this.innerWidth;
  var videoWidth = innerWidth < aspectRatio * window.innerHeight ?
                   innerWidth : aspectRatio * window.innerHeight;
  var videoHeight = innerHeight < window.innerWidth / aspectRatio ?
                    innerHeight : window.innerWidth / aspectRatio;
  containerDiv = document.getElementById('container');
  //containerDiv.style.width = videoWidth + 'px';
  containerDiv.style.width = window.innerWidth + 'px';
  containerDiv.style.height = videoHeight + 'px';
  //containerDiv.style.left = (innerWidth - videoWidth) / 2 + 'px';
  //containerDiv.style.top = (innerHeight - videoHeight) / 2 + 'px';
};

The expected output should adjust correctly on resize, maximize, or full-screen:

If anyone has suggestions, please help as I am struggling to achieve the accurate expected output.

EDIT: http://jsfiddle.net/2m8ay/

javascriptjquerycsshtmlgoogle-chrome

Answer №1

To customize the appearance of your video, you can use CSS to achieve this:

video { 
       width:305px; 
       height:160px;  
       background:blue; 
    }

If the video poster includes an image, you can modify the CSS as follows:

video { 
   width:305px; 
   height:160px;  
   background:transparent url('poster.jpg') no-repeat 0 0; 
   -webkit-background-size:cover; 
   -moz-background-size:cover; 
   -o-background-size:cover; 
   background-size:cover; 
}

However, please note that this approach works best when dealing with a fixed number of videos. For dynamic content, inline CSS may be necessary to reset the background image.

Share Your Solution : http://jsfiddle.net/2m8ay/1/

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

Customize Your Greasemonkey Script Timeout

At our organization, we utilize the Firefox Greasemonkey addon to automatically enter login credentials on a specific webpage upon opening it. Here is an example of what the script consists of: // ==UserScript== // @name logon // @namespace http ...

javascriptfirefoxgreasemonkey

The issue with Node module @kenjiuno/msgreader is that it is unable to find the constructor for MsgReader

I've been having trouble getting the example code for parsing Outlook .msg files using @kenjiuno/msgreader to work. Despite successfully installing the module with npm, my code doesn't seem to function as expected: const fs = require('fs&apo ...

javascriptnode.jsnpmmodulepackage

Eliminate HTML field based on checkbox status

I'm looking to dynamically remove HTML fields based on a Yes/No condition. I've shared the code below for better understanding. If Yes is selected, I want to hide the No Field/Input/Box and vice versa. function AutoCheck() { if (document.getEl ...

javascripthtmlformscheckbox

PHP and MySQLi for inserting records into database

Currently, I am attempting to retrieve user input values from a form and store them in a database using PHP. Below is the contents of my dbConfig file: <?php $mysqli = new mysqli("localhost", "root", "password", "testDB"); /* checking connecti ...

phphtmlmysqli

Emphasize the content within the table cell

Currently, I am working with an HTML table that is being generated by Java. My goal is to highlight the text within a table cell without changing the background color of the entire cell. I should mention that I am aware of the option to achieve this by ma ...

htmlcss

Sort by the date using a specific data attribute

My main objective is to showcase a multitude of posts on this website, sourced from a server that does not organize them by date. I, however, wish to arrange them based on their dates. Currently, the layout on my website looks something like this: < ...

javascriptjqueryhtmlsorting

What is the best way to ensure a stable background image using CSS?

I have successfully created my navigation section and now I am working on the main body of the website. However, when I try to add a background image, it ends up appearing on the navbar as well. Can someone please assist me with this issue? Below is the HT ...

htmlcss

Adjusting transparency to a specific setting

I am working on creating a navigation bar that gradually fades in as the user scrolls through it on larger screens. I want to maintain some level of transparency for the navigation bar and have full opacity for the font within it. Is there a way to ach ...

javascriptjqueryhtmlcss

How can I retrieve data from a "mysql" database and integrate it into my JavaScript file?

I have developed an HTML page that includes a map generated using JavaScript (Google Maps API). The map is currently populated with markers, but I would like to pull latitude and longitude data from a MySQL database in order to create dynamic markers. Is t ...

javascriptmysqljsonmaps

Python allows for the color coding of numbers using a method that is comparable to the conditional

Looking for a Python module or workaround to color code numbers from 0 to 100, transitioning from red to green. I want to visually represent a score by changing the font color based on the number without starting from scratch. Considering creating a dictio ...

pythonhtmlcssnumbersconditional-formatting

The protection ensured by employing an extensive hash in the query string for the recognition of a changing document

I am currently developing a small web application that creates exercise program printouts. The concept is simple - a user like a personal trainer can craft an exercise regimen and send it to their client via email using a unique link. http://www.myurl ...

phpjavascriptjquerysecurity

RAZOR - Strip image elements from variable with HTML content

In the code snippet below, I am using a helper to display content: @Html.Raw(Model.PageData.PageContent) My goal is to filter out any image tags that may be present. I have explored methods like .substring(), but they require specific indices or string n ...

javascripthtmlcssasp.net-mvcrazor

Utilizing identical variables across multiple Ajax functions

I have two AJAX functions within the same script and I need the output of the first function to be collected by the second one and sent to the correct URL. Here is my code: <!DOCTYPE html> <meta charset="utf-8"/> <html> <script s ...

javascriptjqueryajaxapirequest

Prevent loss of data when user incorrectly submits a webform

Currently, I am working with Wordpress and a contact form plugin which is based on php. The form provided by the plugin is quite lengthy and my client has requested that the data entered by users should not disappear if they make a mistake and need to co ...

phpjqueryformsvalidation

Retrieve and showcase Resident information upon clicking the view button through ASP.NET Core

UserDashboard.cshtml <table class="display table" id="ManageUser" style="width:100%"> <thead> <tr> <th>User ID</th> <th>Username</th> &l ...

javascriptc#jqueryasp.net-coreasp.net-core-mvc

Utilizing the ng-init directive to initialize code based on a JSON object

I am attempting to connect the value of ng-init to an input from a JSON object. However, I am receiving a "Syntax Error: Token" message. Can someone help me identify where I am making a mistake? $scope.obj = { init: 'obj.value = obj.value || 20&apos ...

javascriptangularjs

Decoding json data with targeted API keys

Looking for some assistance here. I've got a JSON data set that looks like this: [ { "positive": 2, "negative": 4 }, { "positive": 9, "negative": 18 }, { "positive": 6, "negative": 12 } ...

javascriptvue.js

How can you make the table rows in jQuery scroll automatically while keeping the table header fixed in

Many solutions exist for making the header fixed and the table scrollable using code samples or plugins. However, my specific goal is to have the table data rows scroll automatically once they are loaded while keeping the header fixed in place. Is there a ...

javascriptjquery

Unusual behavior in ReactJS and HTML5 video player observed

I currently have two React presentation components that include HTML5 video tags. The first component, named Homepage, is as follows: export default class Homepage extends React.Component { render() { return( <div className="Homepage"> ...

htmlreactjsvideo

React static methods are a key part of building reliable and

While perusing the React documentation, I stumbled upon the static method. I found myself pondering its usefulness and came up blank. Can you pinpoint a particular scenario where static methods prove beneficial in constructing components in React? ...

javascriptreactjs