When attempting to view video content on mobile devices, streaming may not be supported. In these cases, it is necessary to display a placeholder

Having a problem with the homepage of

Our background video is not playing on some older browsers and mobile devices, and we would like to replace it with an image in those cases.

I have attempted various solutions, but cannot seem to find a way to display an image in place of the video only when it does not play. Any suggestions?

Answer №1

Make sure to double-check the poster attribute in your code. Currently, it is pointing to lcpbg.png, but when I attempted to access your website along with that image link (by clicking this link), I encountered a 404 error. Update it to redirect to images/lcpbg.png in order to display a still image correctly.

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 proper way to safely escape a JSON string for an object that contains user-generated content?

How can I correctly use the variable s for the value-field of an option-element while escaping user input used for key and value? var key='highway'; var value='track'; var s = JSON.stringfy({ [key]:value }, undefined,''); s ...

Discovering keywords within HTML code and concealing particular content through jQuery

My HTML code snippet is shown below: <div id='p1'> <p>First Paragraph</p> <p>Abbot and Costello - Africa Screams</p> </div> <div id='p2'> <p>Second Paragraph</p> <p>Abbot and ...

Exploring Nested XML: Displaying nested XML data dynamically on an HTML webpage

Request: Clients are able to supply any XML file (along with an XSD file that includes the schema of the XML file) containing data. I am required to display a 'data preview' on the asp.net core website and save the Schema of the XML in a hierarch ...

How can I make one background image extend beyond the grid when there are two background images?

I am currently working on a website design using the 960 grid system and a responsive framework called 'skeleton'. Everything is running smoothly, but I have encountered a problem with the header banner. Since it is only 960px wide, there are whi ...

Deactivating the drag feature when setting the duration of a new event in FullCalendar

Hello there! I've integrated full calendar into my Angular project and I'm facing a challenge. I want to restrict users from defining the duration of an event by holding click on an empty schedule in the weekly calendar, where each date interval ...

The CSS transition effect is smooth when the accordion opens, but it does not have the same effect when

Currently, I am creating an accordion component that is supposed to have a smooth transition effect when opened and closed. However, while the transition works smoothly when the accordion opens, it seems to have some issues when it comes to closing. I hav ...

Is there a way to remove an individual file from an HTML file input field?

I recently took on the task of implementing a delete function for an HTML file input with the type "file". The goal is to delete a single file from a list of multiple files. While deleting all files at once is simple, I am having trouble with my function t ...

If a number already exists, create 3 tables using MySQL and PHP

Currently facing an issue, I am in the process of developing a custom registration form for a browser game. I need to assign planets upon registration to users. Here's the breakdown: 9 galaxies, each galaxy consisting of 400 systems with each syste ...

Enter the variable into the parameter

I'm working with some Javascript code: document.getElementById("Grid").style.gridTemplateRows = "repeat(3, 2fr)"; I'm trying to insert a variable as an argument to modify my CSS style. When I attempt the following: "repe ...

Leveraging ng-click and ng-hide/show directives within ng-repeat in Angular

I have a simple Single Page Website built with Angular. I utilized ng-repeat to generate content on the main page, where each item is an image. I am looking to create an alternate view for each image to display more details. I have implemented this feature ...

Column spilling over with cards

Having a card with a form in it, I wanted to implement a y-scroll bar to control the visibility of the form on the page. However, it seems that the columns are extending beyond the boundaries of the card. .card { box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2 ...

The website's content is displayed as a mobile-friendly menu

I've been working on creating a responsive menu using HTML and CSS, and everything is functioning well so far. However, I'm facing an issue with the mobile view of the menu. When the menu opens up, it obstructs the text below it, making it diffic ...

The website that had been functioning suddenly ceased operations without any modifications

It seems like this might be related to a JavaScript issue, although I'm not completely certain. The website was working fine and then suddenly stopped. You can find the URL here - Below is the HTML code snippet: <!DOCTYPE html> <html> ...

Having trouble with Angular2's Maximum Call Stack Exceeded error when trying to display images?

I am facing an issue in my Angular2 application where I am trying to display an image in Uint8Array format. The problem arises when the image size exceeds ~300Kb, resulting in a 'Maximum Call Stack Exceeded' error. Currently, I have been able to ...

scribbling at the heart of the page

I have been struggling to get this text centered using the following code: echo "<div class='pagination' align ='center'>"; Unfortunately, the text still appears on the left side. How can I properly center it? Additionally, I h ...

Utilizing Jquery to automatically scroll to a specific div on page load by setting an

I am attempting to automatically scroll to the div specified in the URL. The URL may include one of 21 different IDs such as: url.com/test#lite1 url.com/test#lite2 url.com/test#lite3 This scrolling action should happen when the page loads (so that user ...

Leveraging retrieved API data to generate numerous components

Hey there! I'm new to JavaScript and I'm working on creating a todo list with fake ToDos from jsonplaceholder using Fetch. My goal is to fetch five different ToDos and display them in separate list items within my list. However, I'm encounte ...

How to send empty values in Angular4 HTTP post request to web API

Attempting to call an http post method from an Angular 4 component to a web API is resulting in empty values being returned. Even when checking the request using postman, the values are still empty. Here is the http post call from the component file: Ed ...

Ways to include margin right for a table

Here is the HTML code I am working with: <table width="100%;> <tr><hr style="width:100%;"></hr></tr> <tr> <span style="float:left">abc</span> <span class="noindex" ...

I'm curious about the meaning behind this code snippet: `$Odd = ($Odd == "even") ? "odd" : "even";`. Any ideas?

<?php $Odd = "even"; $query = $MySQLi->query("SELECT id, look, username, motto FROM users WHERE rank = '7'"); if($query->num_rows > 0): while($UserRow = $query->fetch_assoc()) { $Odd = ($Odd == "even") ? "odd" : "even"; ?&g ...