Smartphone users of my webpage should get the embedded background introduction video in the 9:16 format. However, on iOS, they get only the poster jpg which is deposited for the 9:16 mp4 in the case the line is too slow. On a test iPad in the portrait orientation the 9:16 video works, I don' understand why? On iPhones the orientation doesn't matter (no playback). The video plays as expected on all tested Android phones and the Chrome device simulator.
Here is only the code of my webpage that should handle the intro background video.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>
Demo
</title>
<style>
.videoBg{
position: relative;
width: auto;
background-color: rgba(0,0,0,7.0);
}
#media only screen and (min-width: 900px){
.moveMobil{
display: none;}
}
#media only screen and (max-width: 900px){
.moveBig {
display: none;}
}
</style>
</head>
<body>
<div class="main">
<div class="videoBg">
<video poster="https://mixkit.imgix.net/videos/preview/mixkit-friends-with-colored-smoke-bombs-4556-0.jpg?q=80&auto=format%2Ccompress&w=460"
class="moveBig"
src="https://assets.mixkit.co/videos/preview/mixkit-friends-with-colored-smoke-bombs-4556-large.mp4" type="video/mp4" autoplay="true" loop="true" muted="true" width="100%"></video>
<video poster="https://mixkit.imgix.net/videos/preview/mixkit-portrait-of-a-woman-in-a-pool-1259-0.jpg?q=80&auto=format%2Ccompress&w=460"
class="moveMobil" src="https://assets.mixkit.co/videos/preview/mixkit-portrait-of-a-woman-in-a-pool-1259-large.mp4"
type="video/mp4" autoplay="true"loop="true"muted="true" width="100%"></video>
</div>
</div>
I used as base the example code from Hossam Elnaggar https://stackoverflow.com/a/57281456/2556324 which showed so far the best display outcome.
Maybe I am gone in the false direction?
Looks like the playsinline was the missing part.
This post was the key: https://stackoverflow.com/a/51432655/2556324
Related
I have embedded a video, via my desktop the video is played normally after I click the playbutton.
<!doctype html>
<html class="no-js" lang="de">
<head>
<meta charset="utf-8">
</head>
<body>
<video class="video-html" playsinline="" loading="" controls="true" preload="auto" muted="" src="video.mp4"></video>
</body>
</html>
In the picture you can see the frame at second 0 (Desktop):
Here also the first frame in the picture, on the iPhone
The video also jumps directly to second 5.
Does anyone have a suggestion how I can solve this problem?
The resolution of my iPad 8 is 2160x1620. When I build a website with a div that is 1000 pixels wide, that div is nearly 90% wide on my iPad's screen. That is not what I expected.
On my iMac (full HD) the div is displayed with the correct width. How can I solve this?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div style="width: 1000px; background-color: aqua; height: 10px"></div>
</body>
</html>
Try setting this in the <head> portion of your page:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
This should make your document scale correctly with your device's screen resolution.
You can read more about how it works on W3Schools.
When I add audio tag to html and try to see it on IPhone 5 it has only half the size. How do I fix it?
<!DOCTYPE html>
<html>
<body>
<audio id="audio" preload="auto" tabindex="0" controls="controls" type="audio/mpeg">
<source type="audio/mp3" src="someSource.mp3">
</audio>
</body>
</html>
If I zoom in then it works. But not in the normal screen.
Wrong:
Expected:
If I add
<meta name="viewport" content="width=device-width, initial-scale=1">
It would also show up properly but would become half height once zoomed out.
Also flipping screen horizontally makes it a little bit higher.
EDIT screen after #Romain suggestion:
You only need to expand your tag to full width of your container and adjust a minimum height that will suit all browsers
html
<!DOCTYPE html>
<html>
<body>
<div id="block"></div>
<audio id="audio" preload="auto" tabindex="0" controls="controls" type="audio/mpeg">
<source type="audio/mp3" src="someSource.mp3">
</audio>
</body>
</html>
CSS
audio {
width:100% !important;
min-height: 30px;
display:block;
}
#block {
height:100px;
width: 50px;
background: blue;
}
The issue is your audio tag is floating on the left (not big enough) and it is displayed under a web browser bar.
Here, I don't think the audio tag is the problem. Try to had another html element to review if the tag is well displayed.
I also had to set height:100px; on audio to get full play arrow height to show. It did move the control down in other browsers but I can live with a little white space above the control. Add this to css or to head of the page:
<style>
audio {height:100px;}
</style>
I'm using videojs-youtube, and while I can get the video player to display in youtube, if I try to control it programattically the player breaks (goes black) on ipad. Not sure if this is a problem with video.js or videojs-youtube.
I have created a simple test to just play the video on load. When this executes on ipad, the player turns black, no video or controls are available. I don't see any errors when debugging the ipad w/safari on my connected mac.
<!DOCTYPE html>
<html>
<head>
<link href="http://vjs.zencdn.net/4.3/video-js.css" rel="stylesheet">
</head>
<body>
<video id="vid3" src="" class="video-js vjs-default-skin" controls preload="auto" width="640" height="360">
</video>
<script src="js/vendor/video.dev.js"></script>
<script src="js/vendor/vjs.youtube.js"></script>
<script>
videojs('vid3', { "techOrder": ["youtube"], "src": "http://www.youtube.com/watch?v=xjS6SftYQaQ" }).ready(function() {
this.play();
});
</script>
</body>
</html>
I figured this out. Apple does not allow 'autoplaying' of video on ios devices. I was able to do other things such as this.on("timeupdate"...
When I view the following html file with Safari in an iphone, it does not display the entire width of the content as it's supposed to:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>iOS Viewport Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style type="text/css">
body #wrap {
width: 1008px;
border: 1px solid #000;
}
h1 {
font:30px sans-serif;
}
</style>
</head>
<body>
<div id="wrap">
<h1>Here's some quite eloooongated text that should make the screen at least 1008px wide or more</h1>
</div><!-- end #wrap -->
</body>
</html>
Can anyone see what I'm doing wrong? For what it's worth, I have iOS 6.1 and Safari 6.0
Even though I read apple's various viewport guidelines very carefully, apparently I misunderstood. If a site is non-responsive, like mine, the correct meta in this case is
<meta name="viewport" content="width=1008"/>
This makes the viewport fit the content in both portrait & landscape orientation. There's a discussion of this approach here: http://webdesignerwall.com/tutorials/viewport-meta-tag-for-non-responsive-design
I was googling to see if anyone else had encountered this issue as well. Thought I'd share my results.
My non-responsive site is about 1200px wide, and I wanted it to show the whole site's width while in portrait mode. Setting the scale to 0 also seems to work on what I've tested:
<meta name="viewport" content="width=device-width, initial-scale=0"/>