Two background videos exhibit distinct behaviors when placed within the identical <video> tag

I have noticed a strange behavior with two videos I uploaded online. One, called "Bunny video," appears on top of the navigation bar while the other, named "Space video," is positioned below with an unknown black background (that I did not intentionally set).

What could be causing this issue? I attempted to resolve it locally by changing the format to webm, but unfortunately without success.

<video id="background-video" loop autoplay muted>
    // "bunny video"
    // http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4
    // "space video"
    // http://www.dropbox.com/s/nqkhiatqe9vxw3w/space-odyssey.mp4?raw=1

    // I have swapped the links for the videos here:
    <source src="http://www.dropbox.com/s/nqkhiatqe9vxw3w/space-odyssey.mp4?raw=1" type="video/mp4" />

</video>

Check out the demo on codepen: https://codepen.io/RycerzPegaza/pen/KNYXJg

htmlcssvideo

Answer №1

After reviewing both videos, I have observed that they appear identical to me. However, there is a distinct difference in the aspect ratios of "Big Buck Bunny" and the space clip. The former is displayed in a 16:9 ratio, occupying the entire video frame, while the latter is letterboxed to fit the same ratio, resulting in black bars on the top and bottom.

It seems like the navigation interface integrates seamlessly with the video rather than having a separate black background. Are you able to notice this subtle design detail?

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

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

Angular: Transforming input types

When the div is pressed, it triggers a function that changes the type of input. There are two password inputs that are changed to text when the function is triggered. Issue Error 1: 'password' may be null. If I enter '' in the password ...

htmlangular

Issues experienced with jQuery UI while attempting to implement nested drag and drop functionality

I recently created a nested drag-and-drop feature using jQuery UI, but I'm facing an issue where I can't drop items outside the .drop-container div. Here is the link to the jsfiddle for reference: FIDDLE When I try to drag an item and drop it i ...

javascriptjqueryhtmlcssjquery-ui

Is there a way to retrieve the value from a select tag and pass it as a parameter to a JavaScript function?

I would like to pass parameters to a JavaScript function. The function will then display telephone numbers based on the provided parameters. <select> <option value="name-kate">Kate</option> <option value="name-john">John& ...

javascripthtmlbuttontags

The loading time of the HTML page is longer than expected due to the content being

I have created a static cfm page with a single select query that displays over 3000 records without pagination. When trying to view this page in Firefox, it takes approximately 15 seconds to load the content. Is there any way to reduce the browser loadin ...

htmlcoldfusion

Using various designs on elements generated from ng-repeat

Is it possible to apply different styles to buttons created using ng-repeat by having b.color return a value from the btnValues object? Currently, it is not returning the value. If this is not possible, are there alternative methods to achieve this? < ...

htmlangularjsangularjs-ng-repeat

Update table data automatically from a separate .php file

I've been attempting to update a table without having to refresh the entire page using AJAX, but I'm struggling to make it work. Here's my scenario: I have a main.php page that includes table.php. The table.php file contains a table with ...

phpjqueryhtmlmysqlajax

Tips for styling a central menu using CSS

I am having trouble centering my menu on the website. While other elements like images are centered, the menu seems to be off-center. Below is a snippet of the CSS code related to the menu: @charset "UTF-8"; /* CSS Document */ #nav { width:975p ...

htmlcssmenucenter

Support for numeric font weights in web browsers

Which browser versions have full support for using numeric values for the font-weight property? This includes Internet Explorer, Firefox, Chrome, Safari, iOS Safari, and Android Browser. While most browsers support the keyword values 'bold' and ...

fontscross-browsercss

Looking to switch the markers from circles to icons in the GeoChart component of react-google-charts

During my personal project, I came across the react-google-charts library and discovered a method to add markers to the map. <Chart width={"200%"} height={"100%"} chartType={"GeoChart"} data={geoData} rootProps={{ "data-testid": "1" ...

cssreactjsgoogle-maps-markersreact-google-chartsreact-google-maps-api

Position the Icon to the Right of an Input Field Regardless of its Width

In need of assistance with aligning icons to the right of three input fields, each with different widths. Currently, the icons are aligned to the right of the parent container instead of the individual input fields. If you're unsure what I mean, chec ...

htmlcssinput-field

Using a Node.js module to shrink HTML files

Is there a way to minify HTML before rendering it? I'm aware of console minifiers like: html-minifier However, I am looking for a solution that can be implemented in the code itself. Something along the lines of: var minifier = require('some- ...

javascripthtmlnode.jsminify

Locking the top of a Div in place at the bottom of its Parent div

I encountered an interesting issue when trying to position a div element. To position the child div B inside the parent div A, I have been using relative and absolute positioning. While I know how to align their bottom edges using bottom: 0px, I need to f ...

htmlcsspositioncss-position

Retrieve an HTML page rendering using C#

Is there a way to retrieve the exact HTML code from my website just as it appears in the browser? Initially, I attempted to use a web client like this: using (var client = new WebClient()) { var content = client.DownloadString("my_site_address"); } ...

javascriptc#html

Two interdependent select fields

I am currently working on creating two select fields where, upon selecting an option in the first field, some options in the second field should be hidden. I have almost achieved this, but my script is unable to locate certain options in the first select f ...

javascriptjqueryhtmlcssselect

Utilizing the modulo operation for organizing rows and columns

I’ve seen this question asked many times, but I’m still struggling to figure it out. The examples I’ve come across are either too complex or involve Angular or Javascript. My goal is to learn how to set up 4 columns within a row. // initiating a ...

phphtmlcssmodulo

How to showcase a div outside of its container with a responsive layout

I am currently facing an issue where I need some floated elements to be displayed outside of a container on a Drupal page using an Omega-based theme. My current page structure is as follows: <h2>Some header text</h2> <div class="grid-12 reg ...

cssresponsive-designoverflow

Simple steps to trigger a PHP page from a JavaScript page by utilizing express functions

Currently, I am attempting to showcase a PHP page using JavaScript with express functions. Here is an illustration of the code: var express = require('express') var app = express() app.get('/', function (req, res) { res.send(' ...

javascriptphphtmlexpress

Hamburger Icon in Bootstrap Navbar-Brand is not aligned as expected

I'm currently working on a website project using Bootstrap and have encountered an issue with the navbar component. When the screen shrinks to the breakpoint I've defined (lg), the alignment of the hamburger icon gets disrupted, as shown below. ...

htmlcssbootstrap-5

Steps for deactivating a button until the form has been submitted

Click here for the Fiddle and code sample: $(".addtowatchlistform").submit(function(e) { var data = $(this).serialize(); var url = $(this).attr("action"); var form = $(this); // Additional line $.post(url, data, function(data) { try { ...

javascriptjqueryhtmlajaxforms

Positioning a relative element after a fixed element: Tips and tricks

I can't seem to figure out how to make a position:relative element display after a position:fixed element. In my code snippet, there is a green section representing the relative element and a blue fixed element. By using padding-top, I am able to posi ...

htmlcss