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

What is the process for combining two elements using tailwind?

I am trying to stack two elements on top of each other using tailwind CSS. Here is what I have attempted: <div class = "w-10 h-10" id="container"> <button class = "relative w-4 h-4 bg-red"> Started </button> ...

htmlcsstailwind-css

Styling with ngStyle and changing the background image

Having an issue with a component that has an @Input string value linking to an image. In my HTML file, I originally had: <div class="parallax" [ngStyle]="{'background-image': 'url({{parallaxImage}})'}"></div> This was not ...

htmlangular

How to vertically align text within a container in Bootstrap?

Lately, I've been facing a challenge in my attempts to vertically center text while also incorporating a full-width background image. The goal is for the centered text to maintain its position regardless of the height of the enclosing container. This ...

htmltwitter-bootstrapcss

Creating a table with adjustable row heights is a great way to enhance the user

Can the height of an HTML table row be adjusted dynamically by dragging and dropping, similar to how it's done in this demo (https://reactdatagrid.io/docs/row-resize), but for free? ...

htmlcssreactjs

Include a back button during the loading of a URL in an Electron application

Within my Electron application, I have implemented elements that, upon clicking, redirect to a URL. However, navigating back to the previous (local) page is not currently achievable. Is there a feasible method to incorporate a layered back button on top o ...

javascripthtmlcssnode.jselectron

Customizing form designs with the combination of Django and Bootstrap

After developing a basic purchase form with custom fields, I conducted a test to ensure its functionality. The form rendered successfully, as shown below. <form id="category_form" method="post" action="/purchase/"> {% csrf_token %} { ...

pythonhtmlcssdjangotwitter-bootstrap

Press on any two table cells to select their content, highlight it, and save their values in variables

I have a table retrieved from a database that looks like this (the number of rows may vary): |Player 1|Player 2| ------------------- |Danny |Danny | |John |John | |Mary |Mary | My goal is to select one name from each Player column and sto ...

javascripthtmlmysql

Steps for appending a string to a variable

Currently working on creating a price configurator for a new lighting system within homes using Angular 7. Instead of using TypeScript and sass, I'm coding it in plain JavaScript. Page 1: The user will choose between a new building or an existing one ...

javascripthtmlcssangulartypescript

The Autoprefixer script crashes with the error message: TypeError - Patterns can only be a string or an array of strings

After successfully installing autoprefixer and postcss-cli, I embarked on setting up a simple build process with NPM scripts using my command prompt and VS code. As someone with only 2 months of coding experience, I was following a tutorial on CSS/SASS top ...

cssnpmsasspostcssautoprefixer

Ensuring the width of a div matches the adjacent containers

I need assistance in creating a form that adjusts its width based on the form fields. The form contains both explanatory text and input fields, each enclosed in a div with inline-block set. The outer div (also using inline-block) should not expand beyond ...

htmlcss

What's the best way to update the fill color of an SVG dynamically?

Is it possible to change the color of an SVG image dynamically without using inline SVG tags? I want to create a code that allows users to specify the source for the SVG tag and a hexadecimal color value, enabling them to customize any SVG image with their ...

javascripthtmlcssreactjssvg

Gitbook is facing a unique challenge with the Chinese language in its HTML code - an issue with excessive spacing

Currently, I am utilizing gitbook and github pages to construct my personal webpage with the main language being Chinese. However, I have noticed that gitbook is adding an extra space in some places where it is unnecessary. Below is the text found in the m ...

htmlmarkdowncjkgitbook

Trouble with Chrome's CSS making table cell display as block

After searching, I stumbled upon this question that appeared to have the solution I needed. Surprisingly, even when using chrome 32.0.1700.102, the fiddle provided in the first answer worked perfectly for me. However, when I copied the HTML code into a ne ...

htmlcssgoogle-chrome

Tips for ending a page prematurely

I am currently facing an issue with hosting images on my webpage where the bottom of the images are uneven, creating a messy look at the bottom of the page. Normally I would attempt to align them in a perfect square layout, but since the page needs to be ...

htmlcssimage

Clicking on the icon reveals the current date

I need some help with the input field that displays the calendar date. Currently, I can only click on the input field to show the calendar date. What I actually want is for users to be able to click on a calendar icon to display the calendar date, which sh ...

javascripthtmlcalendar

What is the best way to steer a vehicle in the desired direction by utilizing the arrow keys on the keyboard?

Image1 Image2 While using visual studio code, I noticed that I can move a car forwards and backwards with the arrow keys on the keyboard. However, it doesn't seem to turn when I try to move in opposite directions. Is there a way to achieve this thro ...

javascripthtmlcss

What is the reasoning behind the "open in a new tab" function triggering a GET request?

Check out this HTML tag: <a href="#" id="navBar_navBarInput_3_subNavDropdownInput_0_subNavLinkInput_0" onclick="redirectPost(4,'EntryData.aspx');">My Cool Link</a> The Javascript function "redirectPost" function redirectPost(id, ur ...

javascripthtmlwebrequest

Deploying an Azure Blob Trigger in TypeScript does not initiate the trigger

After successfully testing my Azure function locally, I deployed it only to find that it fails to trigger when a file is uploaded to the video-temp container. { "bindings": [ { "name": "myBlob", "type&qu ...

javascripthtmltypescriptazureazure-functions

Using HTML URL parameter in PHP code

Hi there, I'm new to using PHP and would appreciate any help you can provide. I'm facing an issue with passing a URL parameter from an HTML page (mywebsite.com/f.html?survey_id=5d86055f35bf41f3a35f2c779fc478dc) to a PHP script that should save t ...

phpjqueryhtmlajax.htaccess

Transferring information via Segments in Ionic 3

I'm facing a challenge where I need to transfer a single ion-card from the "drafts" segment to the "sent" segment by simply clicking a button. However, I am unsure of how to achieve this task seamlessly. Check out this image for reference. ...

htmltypescriptionic-frameworkionic2ionic3