Is the HTML5 video backup image misplaced?

Here is the HTML I created to showcase a video background with two fallback images for mobile and old browsers:

<div>
   <video id="video_background" preload="auto" autoplay="true" loop="loop" muted="muted" volume="0"> 
    <!--<source src="whatever......">  Disabled for testing  -->
    <img id="browserFallback src="videos/video.gif" title="Your browser does not support the <video> tag">
    </video>
   <img id="mobileFallback" style="display:none;" src="videos/video.gif" title="Your browser does not support the <video> tag">
</div>

The following JavaScript code is used to display the second image on mobile devices instead of the video:

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {              
    document.getElementById("mobileFallback").style.display = "block";
}

However, when both image objects are present simultaneously as shown above, the mobile fallback image becomes misaligned and only half of it gets displayed for some reason. Removing the "browserFallback" image resolves this issue.

Any thoughts on why this could be happening?

javascripthtmlcss

Answer №1

Your code has some minor mistakes that could potentially fix your issue.

Specifically:

  • You neglected to close the quotes on the id attribute of the initial image tag
  • The text "Your browser does not support the <video> tag" should be adjusted to read "Your browser does not support the $lt;video&gt; tag". This will display as < and > in a browser, which might be confusing your HTML.

Consider revising your code to resemble this:

<div>
   <video id="video_background" preload="auto" autoplay="true" loop="loop" muted="muted" volume="0"> 
       <img id="browserFallback" src="videos/video.gif" title="Your browser does not support the $lt;video&gt; tag">
    </video>
    <img id="mobileFallback" style="display:none;" src="videos/video.gif" title="Your browser does not support the $lt;video&gt; tag">
</div>

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

Using Angular template to embed Animate CC Canvas Export

Looking to incorporate a small animation created in animate cc into an angular template on a canvas as shown below: <div id="animation_container" style="background-color:rgba(255, 255, 255, 1.00); width:1014px; height:650px"> <canvas id="canv ...

javascripthtmlangulartypescriptanimate-cc

Utilizing Soundcloud API Authentication in Angular.js: A Step-by-Step Guide

I've been able to successfully use the public Soundcloud API, but I'm struggling with implementing the callback.html in order to display the login dialog. For my App on Soundcloud, the callback redirect uri is set to: http://localhost:8080/#/cal ...

javascriptangularjssoundcloud

Mastering the art of using componentWillUnmount() in ReactJs

According to the official tutorial: componentWillUnmount() is called right before a component is removed and destroyed. It's used for any necessary cleanup tasks like stopping timers, cancelling network requests, or cleaning up DOM elements that we ...

javascriptreactjs

Stop background scrolling with CSS overlay menu

Is there a way to create a CSS overlay menu that prevents the main content it covers from scrolling when the menu is active? In other words, I want users to be able to scroll through the menu without affecting the background content. I've managed to ...

javascripthtmlcssscrolloverlay

Error Alert: Unable to access property 'top' of undefined object

After tackling a series of bugs in the short script below, I've finally smoothed out the kinks. To witness a functional demonstration, click on this link: http://jsfiddle.net/XG24G/2/ I apologize for providing an extensive context, but when I insert ...

javascriptjquerydebugging

What is the proper way to utilize $location within a standard function?

I am working on an Angular app that consists of both AngularJS and plain JavaScript such as Ajax. I am trying to figure out how to use $location within a function without passing it as a parameter. function x() { $location.path('/error').repl ...

javascriptangularjsangularjs-injector

unique navbar color transition effect specifically for the homepage

I have successfully created a function called changeColour in my code that changes the color of the navbar when scrolling past a certain point. However, I am encountering an issue where I only want this effect to be applied on the Home page. I would like a ...

javascriptcssreactjsscrollreact-router-dom

Is it possible to save edits made to CKEDITOR by clicking a button located outside of the editor?

I am having an issue with inserting HTML code into my CKEDITOR. I have a button on the page that, when clicked, calls: editor.insertElement(link); After inserting the HTML code correctly into the editor, any changes made (such as clicking the 'show ...

javascriptfckeditor

combine two columns into a single responsive list group item

Using Bootstrap 4, I created an item list and divided it into two columns (see image). However, when I resized the website to a mobile size screen, it displayed like this: https://i.sstatic.net/0iPHm.png My desired outcome is for the list to display in o ...

csshtmlbootstrap-4css-grid

Utilizing Lodash to extract properties, dividing arrays, and obtaining distinct values

I found a more effective method to accomplish the task in my JavaScript project by utilizing the Lodash library. The approach involves extracting properties, splitting arrays, and obtaining unique values. var taskobj = [ {'taskno':'a&apos ...

javascriptarrayssplitlodash

Setting the property of an object member using an array member within a JavaScript singleton

My JavaScript code includes a "singleton" class like this: ExpressionValidator = { // A map of function names to the enumerated values that can be passed to it. functionParamValues: { "Func1": ["value1", "value2", "value3"], "F ...

javascriptarraysobjectsingleton

unable to comprehend the remaining section

My divs are not checking/unchecking properly. The else part of my code is unable to read it and displays 'undefined'. Please assist me... (The first click works correctly but the second click shows 'undefined') import React, { useState ...

javascriptreactjs

Use JavaScript to change the text of a hyperlink to @sometext

<li class="some-class one-more"><label>twitter:</label> <a href="https://twitter.com/sometext?s=09" target="_blank" rel="noreferrer noopener">https://twitter.com/sometext?s=09</a> < ...

javascripthtmljquery

Utilizing Angular 2's offline capabilities for loading locally stored JSON files in a project folder

I've been attempting to load a local JSON file from my Angular 2 project folder using the HTTP GET method. Here is an example of the code snippet: private _productURL = 'api/products/products.json'; getProducts(): Observable<any> ...

javascriptjsonangularhttp

"Effortlessly Engage Users with Rails and AJAX Comment Posting

Running a simple blog app dedicated to video game reviews, I encountered an issue with AJAX. As a self-taught student developer, I'm facing a challenge where posting comments on review pages triggers a full page refresh instead of dynamically updating ...

javascriptjqueryruby-on-railsajax

What is the best way to rotate an image using AngularJS?

Hey there, I've got an image that I need help rotating. There are two buttons - left and right - that should rotate the image 45 degrees in opposite directions. I attempted to create a directive using the jquery rotate library, but it's not worki ...

javascriptjqueryangularjsrotationangularjs-directive

Applying CSS selectors to target child elements within a select option

I am looking to apply a CSS selector only on select option child values. I have assigned an id to the selector and now I want to apply different CSS styles to each child (child 1, child 2, etc). <select name="options[81]" id="select_81" class="required ...

htmlcss

Three.js Image Processing with Effect Composer

After reviewing the example located at: I am intrigued by the possibility of applying post-processing effects on a duplicate of the initial data set. Essentially, I am interested in showcasing the original rendering of my scene in one container while simu ...

javascriptthree.jswebglpost-processing

Updating MySQL Status Using PHP and JavaScript

I have a list of tasks that users can add dynamically. Each task has a checkbox next to it, and when checked, the status of that task in the MySQL database should be updated. My initial approach was to include the following code: echo "<input type=&ap ...

phpjavascriptjquerymysql

Issue with CoffeeScript and three.js: scene not defined

I've been troubleshooting this issue for hours, but I can't seem to figure out the error... Here's the error message I'm getting: Cannot read property 'add' of undefined Below is my coffeescript code file (hopefully it&apos ...

javascriptcoffeescriptthree.js