The video on mobile is not loading properly, as the play button appears crossed out

There seems to be an issue with GIFs not loading on mobile devices, even though they are implemented as mobile-ready.

<video src="/wp-content/uploads/2017/09/5.mp4" 
preload="metadata" autoplay="autoplay" loop="loop" 
muted="muted" controls="controls" width="305" height="170></video>

You can find some examples on this page here, where 10 GIFs are featured and sometimes have trouble loading, appearing like this:

The issue occurs within the WordPress platform when the GIFs are added to the media library. I have tried adjusting preload settings such as "none", "auto", and removing preload altogether, but the problem persists in both Safari and Chrome on mobile.

On desktop browsers, everything works perfectly fine without any issues.
htmlcsswordpressvideo

Answer №1

It's possible that the issue lies with certain operating systems not supporting the video format. Consider providing the videos in webm format as an alternative solution. This can be done by including two source tags within the video tag, each with a different file format specified in the src attribute.

For instance:

<video width="480" height="320" controls>
  <source src="my_movie.mp4" type="video/mp4">
  <source src="my_movie.webm" type="video/webm">
</video>

Additionally, you may want to consider adding an .ogg file for further compatibility.

Based on my personal experience, "Miro Video Converter" is a reliable tool for converting video files in a manner that ensures they are recognized across various browsers and operating systems.

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 best method for aligning forms vertically within a page layout?

I'm working on designing a contact form, but I'm having trouble getting everything to align properly. Specifically, I can't seem to get the form elements to line up vertically and I also want the Message label to appear on the top left side ...

htmlcssforms

Troubleshooting: Issue with fixed positioning in React (Next.js) causing problems with modal window functionality

I'm currently working on implementing a modal window in React, but I've encountered an issue where setting position: fixed results in the modal window's position being relative to the page rather than the browser window. For privacy reasons, ...

javascripthtmlcssreactjsnext.js

Set a variable to represent a color for the background styling in CSS

My goal is to create an application that allows users to change the background color of a button and then copy the CSS code with the new background color from the <style> tags. To achieve this, I am utilizing a color picker tool from . I believe I ...

javascriptphpcss

The search functionality on my website, powered by webapp2 and HTML, is not functioning properly

Upon examination, I noticed that my search term is being transmitted to my handler as an empty string. Here are the key components: This is my HTML form: <form class="navbar-search" action="/search"> <input type="text" class="se ...

jquerypythonhtmlgoogle-app-enginewebapp2

Stack two divs together

It may seem silly, but I just can't get it to work. I'm attempting to enclose two divs with different classes in another div, but my current code is automatically closing the divs. There are multiple sets of divs with classes .panel-heading and ...

javascriptjqueryhtml

Prevent the href from navigating to the next page when a doubleclick event listener is triggered

In my project, I am using an anchor tag that redirects to another page. However, if the user double clicks on it, I want to prevent the default behavior and stop the redirection. <a href="{location}">My Link</a> element.addEventListen ...

javascripthtmlhrefanchorevent-listener

Exploring JSONP data using AJAX

Tomorrow I have an exam on Web Design and I'm struggling to understand how to read JSONP responses with AJAX. While I can work with JSON and basic JSONP, I face issues when a callback function is involved. Let me illustrate this with two examples: F ...

jqueryhtmlajaxjsonp

Unlocking the power of HTML tags in Selenium WebDriver: accessing elements like a pro

I'm working with this HTML snippet. <span class="ng-binding" ng-bind="::result.display">All Sector ETFs</span> <span class="ng-binding" ng-bind="::result.display">China Macro Assets</span> <span class="ng-binding" ng-bind ...

htmlseleniumselenium-webdriver

What is the best way to ensure that my drop-down menu items match the size of the parent nav bar?

I'm having trouble creating a dropdown menu using only CSS. Specifically, I am struggling to ensure that the dropdown menu is the same size (width and height) as its parent element. Here is a link to a working example: HERE This is the snippet of HT ...

htmlcss

Troubles encountered when wrapping columns in bootstrap framework

I'm experimenting with a design that utilizes Bootstrap's grid system, but I'm experiencing some challenges with the content either wrapping or extending off-screen. What I want is to have a sidebar with fixed width (around 250px), and its a ...

htmlcssbootstrap-4

Discovering the method for retrieving JavaScript output in Selenium

Whenever I need to run JavaScript code, the following script has been proven to work effectively: from selenium import webdriver driver=webdriver.Firefox() driver.get("https:example.com") driver.execute_script('isLogin()') However, when I atte ...

javascriptpythonhtmlfunctionselenium

Align the button to the right within the form

Having difficulty aligning a button to the right using float: right; No matter what I try, the button with the "advanced-search-button" class refuses to move to the right. This issue is occurring in Bootstrap 4. HTML <link href="https://maxcdn. ...

htmlcssalignmentbootstrap-4

Unresponsive Button_tag within a Rails table

The situation is as follows: I have a button_tag located within a form that is nested inside a table: <div class="table-responsive tableBG"> ** Interestingly, the button functions perfectly when placed here ** <table class="table table-striped ...

htmlbootstrap-4ruby-on-rails-5twitter-bootstrap-rails

Issues arise when trying to manage HTML received as a response from a server in plain text

I have a scenario where I am dynamically generating an HTML table on the server side using Java and then sending it to the client as JSON data. The response looks something like this: <table class="table"></table><thead class="thead-dark"&g ...

javascriptjqueryhtml

What is the preferred approach in JavaScript: having a single large file or multiple smaller files?

Having a multitude of JavaScript files loaded on a single page can result in decreased performance. My inquiry is this: Is it preferable to have individual files or combine them into one JavaScript file? If consolidating all scripts into one file is the ...

javascripthtmlperformance

Adventures in WordPress Shortcode Simplified

Just diving into the world of Wordpress and trying to grasp the ins and outs of Shortcodes, along with creating my own customized ones. I decided to start off simple by referring to the Shortcode documentation provided by Wordpress // [mytag color="color ...

phpwordpressshortcode

Breaking the loop with a simple statement

I'm unsure if anyone will notice if I make changes to my preceding post, so I am here now to create a new one. Below is the code snippet: $(document).ready(function(){ var a; var b; var c; var d; var pmmain = ["Citrix", "Coach", ...

javascriptjqueryhtmlarraysbreak

Saving similar and dissimilar information in a database

I have been working on implementing a Like and Unlike feature for users to interact with products. Following this tutorial at , I've completed the necessary steps. However, I'm facing an issue where the likes are not being stored in the database ...

javascriptphpjqueryhtmlajax

What are the steps to create a dynamic navigation menu in Angular 2?

I have successfully implemented this design using vanilla CSS and JS, but I am encountering challenges when trying to replicate it in Angular 2. Setting aside routing concerns, here is the current state of my component: navbar.component.ts import { Comp ...

cssangulartypescript

What is the best combination of tools to use for web development: express with jade/ejs, along with html5, css

As I delve into learning node.js/express, a question arises about how jade/ejs, html, and css work in harmony. Allow me to share my understanding: The application logic is implemented in node.js/express A portion of this logic/variables is injected into ...

htmlcssnode.jsexpresspug