The <img> tag is displaying with dimensions of 0 x 0 pixels even though its size was specified

Is there a way to control the image size within an <img> tag placed inside an html5 video element? Currently, it keeps defaulting back to 0 x 0 pixels.

The reason behind using this img is to serve as a fallback for outdated browsers where the video tag might not function properly.

Below is my code snippet (please note that I intentionally removed "myVideo.mp4" to simulate the fallback):

<video id="welcome" height="1080" width="1920" preload="auto" loop autoplay>
   <source type="video/mp4" src="@Url.Content("~/_video/myVideo.mp4")" />
   <img src="@Url.Content("~/_video/posterframe.jpg")" height="1080" width="1920"/>
</video>

Upon debugging in chrome, the result shows "0x0 pixels (Natural: 1920 x 1080)"

Any suggestions on how to resolve this issue would be greatly appreciated. Thank you!

csshtmlimagehtml5-video

Answer №1

It seems that the browser is intentionally hiding the <img> element while displaying the <video> element, especially in Chrome where video elements are supported. However, testing this in a different browser like IE8 shows that the fallback image content is displayed properly.

Your current method of testing for fallback is incorrect. Simply removing the video source will result in a 404 error rather than showing the fallback content. The proper way to set a fallback is by using the poster="" attribute within the <video> element, which is missing from your code.

poster

The address of an image file for the UA to show while no video data is available

Here's an example:

<video poster="@Url.Content("~/_video/posterframe.jpg")" id="welcome" height="150" width="150" preload="auto" loop autoplay>
   <source type="video/mp4" src="@Url.Content("~/_video/myVideo.mp4")" />
   <img src="@Url.Content("~/_video/posterframe.jpg")" height="1080" width="1920"/>
</video>

Full Demo (confirmed working on Chrome 26)

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>HTML5 video demo</title>
</head>
<body>
  <video id="welcome" height="150" width="100" preload="auto" loop autoplay poster="http://lorempixel.com/150/100/abstract/1/">
   <source type="video/mp4" src="http://www.808.dk/pics/video/gizmo.mp4" />
   <img src="http://lorempixel.com/150/100/abstract/1/" height="150" width="100" alt="" title="Your browser does not support the <video> tag"/>
</video>
</body>
</html>

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

How can AngularJS handle sorting based on the start date and end date?

Is there a way to filter the items by Start and End Date, based on the invoice_date, using the date range functionality in a meanjs app? I am facing an issue where the date filter functions work perfectly in Plunker and my localHost production environm ...

htmlangularjsmeanjs

Can you explain the concept of "cascading" within CSS?

Can someone kindly explain the specific definition of "Cascading" in Cascading Style Sheets (CSS)? I have heard conflicting perspectives on this topic, so I am seeking clarification here. Any examples to illustrate would be greatly appreciated. ...

cssterminologycss-cascade

jQuery Load - Oops! There seems to be a syntax error: Unexpected token <

Error: Uncaught SyntaxError: Unexpected token < I encountered the error message mentioned above while trying to execute a jQuery load function: $('#footer').load(UrlOfFooterContent); The variable UrlOfFooterContent holds the URL of an MVC c ...

javascriptjqueryhtml

Storing data in a text or HTML file using server-side JavaScript

Currently, I am working on a JavaScript form that involves saving user-entered variables to either a .txt file or a new webpage with the variables pre-filled in the inputs. I know that JavaScript cannot directly manipulate the user's machine, but I am ...

javascripthtmlserver-side

Nested divs with inline formatting

On my HTML page, I have the following structure: <div id="frst"> FIRST </div> <div id="top"> <div id="mid"> <div id="bottom"> <ul class="menu"> <li>A</li> ...

csshtmlinline

What are the best methods for aligning pseudo elements vertically?

I am facing an issue with the placement of a before and after pseudo element for articleSubTitle. The problem occurs when the text from articleSubTitle wraps to a new line within a small container or on mobile devices. This causes the after element to appe ...

htmlcss

Utilize CSS to selectively apply the mix-blend-mode property to targeted elements

In my project, I am aiming to utilize the mix-blend-mode property to give certain SVG paths the appearance of an erasing path by blending them with a background image on the stroke. However, I have encountered a challenge where the mix-blend property affec ...

htmlcsssvgimage-maskingmix-blend-mode

Creating a versatile TailwindCSS grid that can adjust to varying numbers of grid columns

I am currently working with Vue3 and TailwindCSS, attempting to create a grid using a dynamic grid-cols-{n} class. While I am aware that TailwindCSS typically supports up to 12 columns by default, the challenge arises when the number of columns needed is e ...

javascripthtmlcsstailwind-css

Adjusting the dimensions of the central container

Does anyone have suggestions on how to resize the middle red container when the window is resized, considering the fixed-width black containers on the left and right? I am aware that this can be achieved using jQuery by calculating the window width and a ...

javascriptcssangularjs

"Using Flexbox to Align Child Elements of Varying

After learning about flexbox, a pressing question arose: How can I create a layout of columns similar to the one shown in this image? Check out MyCodeFiddle for more details! (http://jsfiddle.net/1s3bo913/) Click here to view the layout project: Layout Pr ...

htmlcssflexbox

Unused DIV elements in jQueryUI are identified using XSLT

Just a heads-up, I'm new to xslt so please bear with me if this seems like a silly question. In my xsl:template I have created a div element like this: <div id="objectLocked"> This object is locked by another user. Do you want to remove the lo ...

htmlcssjquery-uixslt

Tips for validating multiple forms on a single page without altering the JavaScript validation structure

My JSP page currently consists of two forms: <body> <form id="1"></form> <form id="2"></form> </body> Only one form is visible at a time when the page is viewed. A JavaScript validation file is used to check the ...

javascriptjqueryhtmlformsjsp

What methods can I use to ensure my HTML/CSS code is compatible with all browsers? It functions properly on Chrome but encounters issues on Safari, Edge, and other

My hosting for the website is with bluehost, and interestingly when viewed on Chrome, everything appears perfect. However, upon switching to Safari, I noticed that the background of the about me section is not black as intended, and the footer seems to be ...

htmlcss

Revamp every single hyperlink that ends in .html

I am looking to customize the URLs on my website to appear like this: www.example.html/1 www.example.html/2 www.example.html/3 instead of their current format: www.example.html/1.html www.example.html/2.html www.example.html/3.html Can anyone provide a ...

htmlapache.htaccessweb

I have been attempting to extract real estate listings from an MLS website using Beautiful Soup and have found some success. I am now considering if using Selenium would be a more efficient option

Perhaps this question has been answered before, which could help guide me in the right direction. The website loads 24 listings at a time and then displays a "see more results" button to load the next batch of 24 listings while keeping the initial 24 visib ...

htmlseleniumweb-scrapingbeautifulsoup

Effortlessly fill dropdown menus with data from JSON files

I've been using this jQuery code successfully, but I recently needed to add 3 more field columns to the JSON. My goal is to have the HTML select drop-downs dynamically change based on the data from the previous drop-down. Additionally, my current jQue ...

javascriptjqueryhtmljson

Endless Loop Seamless Vertical JavaScript Experience

I've been working with an HTML table structure of data and was successful in setting up a vertical list loop using some JavaScript. However, I'm facing challenges in achieving a smooth constant vertical scroll. Currently, it goes row by row when ...

javascriptjqueryhtmlcss

Using JQuery's .mouseover and .mouseout methods to modify font colors on a webpage

Hi there, I'm new to JQuery and trying to experiment with some basic functionalities. I have a simple navigation menu created using an unordered list, and I want to change the font color of the currently hovered list item using JQuery. However, I&apos ...

javascriptjqueryhtmlcssfonts

An issue occurred while trying to retrieve the js file, as an error with code net::ERR_ABORTED 404 (Not

Although this question has been asked before, I am unsure where to find the solution. My express backend server needs to render an HTML page with main.js in it upon launch. app.js code: var createError = require('http-errors'); var express = req ...

javascripthtmlnode.jsexpresshttp-status-code-404

Can CSS be used to automatically focus on a div element?

Can CSS be used to set autofocus on a div element? <div class="form-group" style="margin-left:10px"> <label for="organizationContainer" class="nmc-label">@Res.GroupStrings.CreateNewGroupOrganization</label> <div id="organiza ...

javascripthtmlcss