Picture not showing up when loading iPhone video

My website features a video that is displayed using the following code:

<div class="gl-bot-left">
    <video controls="">
        <source src="https://www.sustainablewestonma.org/wp-content/uploads/2019/09/video.fixgasleaks.mp4" 
                type="video/mp4">Your browserdoes not support the video tag.
    </video>
</div>

While this setup works well on desktop, it presents an issue on iPhone. Instead of displaying an image from the video, it simply shows a play button icon. This means users need to press play to start viewing the video. Is there a way to display an image preview for the video when it's initially loaded?

javascripthtmlcssiphone

Answer №1

If you're facing issues with the HTML <video> object, there is a specific attribute designed for such scenarios: poster. This attribute allows you to set an image that will be displayed until the video starts playing.

<div class="gl-bot-left">
    <video controls="" poster="https://picsum.photos/id/1/200/300">
        <source src="https://www.sustainablewestonma.org/wp-content/uploads/2019/09/video.fixgasleaks.mp4" 
                type="video/mp4">Your browserdoes not support the video tag.
    </video>
</div>

Edit

If your iOS device is giving you trouble, here's a clever workaround:

  • Insert an HTML <image> containing your desired placeholder before the <video> tag, and enclose both elements in a <div> container.
  • Hide the image by setting its visibility property to hidden.
  • Create a small transparent .png image (e.g., 64x64 pixels) and use it as the poster image for the video element. This prevents displaying the initial frame of the video.
  • Listen for the loadedMetaData event and within its callback function, resize the image to match the dimensions of the video and change its opacity to visible.

var video = document.querySelector('video');

function metaDataLoaded() {
  var image = document.querySelector('img');
  image.width = video.videoWidth;
  image.height = video.videoHeight;
  image.style.visibility = "visible";
}
.container img {
  position: absolute;
  visibility: hidden;
}

video {
  position: absolute;
}
<div class="gl-bot-left">
  <div class="container">
    <img src="https://picsum.photos/id/2/300/200">
    <video controls="" poster="https://i.imgur.com/A9WPATe.png" onloadedmetadata="metaDataLoaded()">
        <source src="https://www.sustainablewestonma.org/wp-content/uploads/2019/09/video.fixgasleaks.mp4" 
                type="video/mp4">Your browserdoes not support the video tag.
    </video>
  </div>
</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

Is it okay to incorporate this code into the existing plugin?

My plugin, known as "pluggable," has the ability to take any element with the class .plugin and inject the following markup into it: <span class="colorable">color me</span> Below is the original markup containing elements with the class "plug ...

javascriptjquerypluginsjquery-plugins

The best method for sending JSON or JS objects along with Form Data using AJAX POST to PHP for optimal efficiency

Although it may seem like a repetitive question at first glance, I have carefully gone through all related posts and have not come across a clear answer or solution to my specific issue. Any guidance towards relevant material would be greatly appreciated, ...

javascriptphpjqueryajaxjson

Using AngularJS to create a placeholder for a <select> element within ng-repeat

I’ve been facing a challenge while trying to insert a placeholder within an html select tag utilizing ng-repeat for an AngularJS application. Here is the JS fiddle link This is how my HTML structure appears: <div ng-repeat="item in items"> <d ...

htmlangularjs

Could the reason behind the malfunctioning of the bootstrap tabs be due to my CSS files?

I'm looking to implement Bootstrap tabs in the sidebar of my website, but I'm running into an issue where the tabs aren't functioning properly within the sidebar-parsel-liste class. If I place the tab tags outside of this class, everything w ...

htmlcsstabsbootstrap-5sidebar

Guide to creating an HTML table with bokeh

As a newcomer to Bokeh, I've been searching through the documentation for examples but haven't come across an in-built method for creating tables. I have some data that I need to display in tabular format and was wondering what the most straightf ...

pythonhtmlplotbokeh

Utilizing Express JS to Optimize JPEG File Loading with Cache Headers

I have been working on implementing Cache-Control for my static image files. I have successfully set this header for HTML and JS files: https://i.stack.imgur.com/9VuWl.png However, I am facing challenges with JPEG files: https://i.stack.imgur.com/p52jm. ...

javascriptnode.jstypescriptexpresscaching

What could be causing this program to continuously add values to the message table whenever the page is refreshed?

Looking for a simple chatting system using php, mysql, html, css and javascript? Check out this code snippet. However, there seems to be an issue with the message sending functionality. Every time a user sends a message and refreshes the page, the same m ...

javascriptphphtmlcssmysql

What is the best way to horizontally align my div content while ensuring it is responsive, alongside a sidebar and top menu on the same

I am facing an issue trying to center my div content responsively with a sidebar menu and a top menu using Bootstrap. However, when I require the side-menu file, my div content gets placed at the bottom of the page unexpectedly. I am only using Bootstrap 5 ...

phphtmlcssbootstrap-5center

Using CSS to create shape gradients

I've been attempting to replicate the shape gradient found on Laracasts for hours, but unfortunately, my code isn't displaying anything. Can anyone lend a hand? a{ background: linear-gradient(118deg,#328bf2,#1644ad); border-radius: 54% ...

htmlcss

CSS clearfix doesn't appear to be functioning properly

I've been experimenting with using clearfix instead of the clear both property, but it's not working as expected. Despite following tutorials, the issue persists. How can I troubleshoot this and make it function properly? * { marg ...

cssclearfix

The functionality of the bootstrap Dropdown multiple select feature is experiencing issues with the Onchange

Creating a Bootstrap Multiple Select Drop Down with dynamically retrieved options from a Database: <select size="3" name="p" id="p" class="dis_tab" multiple> <?php echo "<option>". $row['abc'] ."</option>"; //Fetching option ...

javascriptjqueryhtmlajaxtwitter-bootstrap

Error on Android WebView: 'console' is undefined

While attempting to open an HTML file with JavaScript in an Android Webview, I encountered an error after implementing the onConsoleMessage of my WebChromeClient: Uncaught ReferenceError: console is not defined -- From line 10 of file:///storage/sdcard0/T ...

javascriptandroidwebviewandroid-webview

What could be preventing the onclick event from functioning properly in JavaScript?

After creating a basic JavaScript code to practice Event handling, I encountered an issue where the function hello() does not execute when clicking on the "Click" button. What could be causing this problem? html file: <!DOCTYPE html> <html> ...

javascripthtmlonclickeventhandler

What are the steps to implementing React in this particular situation?

In my Django application, there is a view that presents booking data for all theaters on a specific date. Once the data is loaded, an authorized user can carry out tasks such as assigning coordinators or changing timings using ajax (jquery) and updating ...

javascriptjqueryarchitecturereactjs

Navigate to a particular section, initially gliding smoothly before suddenly lurching downwards on the screen

I am currently working on improving the functionality of my fixed navigation bar at the top of the screen. When a link in the nav bar is clicked, it scrolls to a specific section using this code: $('a[href^="#"]').bind('click.smoothscrol ...

javascriptjqueryhtmlcssanimation

Is SSG the best approach for deploying a Nuxt.js dashboard?

We have plans to create an internal dashboard utilizing Nuxt.js. Since this dashboard will be used internally, there is no requirement for a universal mode. Typically, most dashboards are designed as SPAs (Single Page Applications). However, SPAs still ne ...

javascriptvue.jsnuxt.js

Show or hide a specific element based on the property assigned to a user's role

In my current project, I am focusing on distinguishing between two key user roles: editor and guest. The editor holds complete privileges for create, read, update, and delete operations, while the guest is limited to viewing certain elements like a list ...

javascriptvue.jsroles

How can we make v-show reactive with each click of a checkbox or toggle in Vue.js 3?

<template> <ToggleSwitch class="right " @onChange.preventDefault="onChange" ></ToggleSwitch> <div v-show="!hidden"> <CheckBox v-if="typeof cellProps.rowData.Bra ...

javascriptvue.jsvue-componentvuejs3vue-directives

"From time to time, reimport React when saving to ensure all necessary imports are

When working with TypeScript in *.tsx files, particularly when copying code around, I frequently encounter the issue of an additional import line being added. This can be seen below: import React from "react"; // ? On Save "editor ...

javascriptreactjstypescriptvisual-studio-code

Tips for changing the background color of a dropdown menu when hovering in Zurb Foundation 5

Is there a way to customize the background color when hovering over <a href="#">Find Me</a>? I want the background color to change while hovering, similar to how it appears in the image before hovering. And this is how it looks after hovering: ...

csshtmlzurb-foundation-5