The play button on the video control appears blurry in iOS 9.3.2

My iPhone running iOS 9.3.2 is experiencing a display issue when I try to open an HTML page with a video tag. There seems to be a blurry initial play button as shown in the image. Any suggestions on how to fix this?

https://i.sstatic.net/RmLMI.png

.video_play_container {
    position: relative;
}
.video_play {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
}
<div class="video_play_container">
  <span class="video_play" id="video_play"></span>
  <video width="100%" controls="controls" poster="http://7xoaon.com2.z0.glb.qiniucdn.com/s/p/product_v2/6ca/a9b/b7x/hsvb4000og0ck4ko4gkwwco8kg.jpg?imageMogr2/auto-orient/thumbnail/700x|watermark/3/image/aHR0cDovLzd4b2Fvbi5jb20yLnowLmdsYi5xaW5pdWNkbi5jb20vc2VlbG9nby5wbmc=/dissolve/100/gravity/SouthWest/dx/10/dy/10/text/5q-P5pel5LiAU2Vl/font/5b6u6L2v6ZuF6buR/fontsize/400/fill/I0VGRUZFRg==/dissolve/100/gravity/SouthWest/dx/50/dy/17">
    <source src="http://video.seecsee.com/2016/05/31/18/04e5a8230cf1f2605a66799033127c83.mp4">
  </video>
</div>

ioscsshtmlhtml5-video

Answer №1

Your webpage lacks mobile responsiveness, which is why it may not display correctly on mobile devices. To address this issue, you can insert the following meta property within the head tag of your HTML:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

Here is an example of how you can implement this in your page:

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>

</head>

<body>

<div class="video_play_container">
  <span class="video_play" id="video_play"></span>
  <video width="100%" controls="controls" poster="http://7xoaon.com2.z0.glb.qiniucdn.com/s/p/product_v2/6ca/a9b/b7x/hsvb4000og0ck4ko4gkwwco8kg.jpg?imageMogr2/auto-orient/thumbnail/700x|watermark/3/image/aHR0cDovLzd4b2Fvbi5jb20yLnowLmdsYi5xaW5pdWNkbi5jb20vc2VlbG9nby5wbmc=/dissolve/100/gravity/SouthWest/dx/10/dy/10/text/5q-P5pel5LiAU2Vl/font/5b6u6L2v6ZuF6buR/fontsize/400/fill/I0VGRUZFRg==/dissolve/100/gravity/SouthWest/dx/50/dy/17">
    <source src="http://video.seecsee.com/2016/05/31/18/04e5a8230cf1f2605a66799033127c83.mp4">
  </video>
</div>

</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

CSS: the enigmatic padding of absolute positioning within a table cell

I am encountering an unusual issue while attempting to position a div element absolutely inside a table-cell. In order to achieve absolute positioning, I utilize a wrapper div element with position:relative: HTML <table> <colgroup> ...

htmlcss

What are the steps for increasing text input size on an html page?

I was actually using w3schools, so I'm a bit lost now. On this repl called BatCoder, you can write and save Bat files. And currently, I need to expand the text input! Would really appreciate any help as I am still learning how to code. No errors, j ...

htmlreplit

The entire title serves as a hyperlink, not just the text portion

Apologies if I'm making mistakes, I'm just starting out with coding and navigating this website. So here's the deal: I am trying to add advertisements to my website on the left and right sides of the centered "Logo" at the top. The issue i ...

htmlcssheader

Positioning a div at the bottom of a webpage without using absolute positioning in HTML

Check out the fiddle. I've included some CSS to position the tab on the right side. My goal was to have those tabs in the lower right corner of the container. If I use absolute positioning for the div, it messes up the tab content width. I tried ad ...

javascriptjqueryhtmlcss

`Is there a way to develop an IOS application on an IOS device?`

I've developed an application using Codea and successfully exported it to an XCode project. Is there a method to compile and run it on IOS or Windows operating systems? ...

ioscodea

Changing the position of an image can vary across different devices when using HTML5 Canvas

I am facing an issue with positioning a bomb image on a background city image in my project. The canvas width and height are set based on specific variables, which is causing the bomb image position to change on larger mobile screens or when zooming in. I ...

javascriptcsscanvascordovahtml5-canvas

Can a hyperlink be generated to a webpage with quotation marks in the URL?

Is there a way to create hyperlinks to pages on my site that have double quotes in the page address? For example: <a href="mysite.com/search.php?q="sales+manager"&l=usa"></a> The above code only links to mysite.com/search.php?q=, which i ...

phphtml

Is it not possible to collapse in webkit?

Check out this jsfiddle link for a visual example: http://jsfiddle.net/qrbhb/ If you use the following HTML markup: <div>There should be no gap between us</div> <br /> <div>There should be no gap between us</div> along with ...

csscross-browser

iPhone footer hides table content

Encountering issues on an iPhone while attempting to display a "timeline" consisting of a table content. The problem arises when 30 rows are present, but only 28 are visible on the screen. The remaining two rows are hidden behind the footer, requiring scro ...

htmlcssbootstrap-4

Exploring the possibilities of using rem, em, and px for setting image dimensions

I am in need of clarification on the use of different units for image dimensions. Despite my research, I have not been able to find a consistent answer. Some sources suggest using only rem/em instead of pixels, but I am unsure if this also applies to image ...

htmlcss

Discover the secret to applying a gradient shade to the "border" element when it reaches full capacity with Vue's innovative Custom CSS package

Utilizing the package https://www.npmjs.com/package/vue-css-donut-chart#usage-with-all-the-available-props to create a "border" effect around images based on progress has presented a challenge. Specifically, achieving a gradient color for the border when i ...

javascripthtmlcssvue.js

Customize the default styles for Angular 2/4 Material's "md-menu" component

Seeking to customize default styles of md-menu in Angular Material. The challenge lies in the dynamic generation of elements by Angular Material, preventing direct access from HTML. Visual representation of DOM: https://i.sstatic.net/v8GE0.png Component ...

javascriptcssangularangular-materialangular-material2

Is the onmouseover / onmouseout transition failing to function properly?

Is there a way to make the ease-in-out effect work without modifying the HTML code? http://jsfiddle.net/68ojLg6p/ <img class="transition-img" onmouseover="this.src='http://1.bp.blogspot.com/-ISjKMLTnaTQ/Ty-USX-J1uI/AAAAAAAAC_0/YB6MUMflRmg/s400/fe ...

csstransition

Trouble Viewing Images on Website

I am currently dealing with a critical issue in my project. I am using the MVC model and have my CSS stylesheet located in the view folder. In this stylesheet, I have included the following code for the body element: body{ margin-left:250px; backg ...

phphtmlcss

Alternative form for non-javascript browsers in the absence of script

I'm currently working on a landing page for an upcoming product, and I've run into a bit of a snag. <form novalidate method="POST" class="subscribe-form"> <noscript> </form> <form method="POST" action="/ ...

javascripthtmlformsnoscriptclient-side-scripting

Android TV with Ionic

I am working on an APK for Ionic on Android TV and I am facing an issue with the arrow controls. The APK runs on the device but the behavior is not correct. When using arrows to shift the app, the focus does not work as expected. It skips some divs. Here ...

androidhtmlionic-frameworkbehaviorarrows

Modifying jQuery CSS causes certain CSS rules from a file to be deleted

When using jQuery to change the css of an element, I've noticed that it can remove some previously specified css rules for that element. For example, .className, .className2, etc... { background-color: black; color : silver; } .className: ...

jqueryhtmlcss

Trigger the animation of a Div element when the cursor hovers over a different Div

I am interested in creating an animation where one div moves when the mouse hovers over another div elsewhere on the page. Here is an example... CSS #blue-box { position:absolute; margin-left:50px; margin-top:50px; height:100px; width:100px; background-c ...

jquerycsshoverjquery-animate

Display just a fraction of a picture

Just recently, I had a surprising discovery when I right-clicked on the cross icon and noticed that the background image in the Tags section of the Ask Question page contained multiple icons beyond just the cross. Curious about how this was achieved, I sea ...

htmlcss

Revised: "Redesigned CSS class names taken from a

I created a React component library using mantine with @rollup package. This library comprises custom components styled with styled-components and CSS module (.module.css) files. All the css modules are bundled in javascript and injected into the body htm ...

cssreactjsnext.jsrollup