I am trying to get the iPad video to display the same as the desktop. I am using media queries redirecting the browser to different stylesheets depending on the browser size. The video css is the same for both desktop and tablet.
On the desktop the user can view a full height and width video in the background, when resizing the browser the video adapts to the browser until the width is 640px then I have changed display: none for the video.
When browsing on the iPad however, the video has a 100& width but the height is not 100% leaving letter boxing. Any help with this.
Other sections or div tags with 100% height works fine. Any comments or help would be much appreciated, thank you (Y)
HTML Header:
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=yes" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" type="text/css" media="only screen and (max-width: 480px)" href="styles/index/mobile.css"/>
<link rel="stylesheet" type="text/css" media="only screen and (min-width: 480px)" href="styles/index/600px.css"/>
<link rel="stylesheet" type="text/css" media="only screen and (min-width: 600px)" href="styles/index/tablet.css" />
<link rel="stylesheet" type="text/css" media="only screen and (min-width: 1024px)" href="styles/index/stylesheet.css"/>
Video CSS for desktop and tablet:
#video_background {
display:block;
position: absolute;
bottom: 0px;
right: 0px;
min-width: 100%;
min-height: 100%;
z-index: -1000;
overflow: hidden; }
I don't have an iPad near me, so I can't really test. But I've seen issues like this before (regarding situations where folks need 100% heights).
This would be my best guess:
Add top: 0px; to your #video_background CSS, probably wouldn't hurt to add left: 0px; as well. Essentially, doing this:
#video_background {
display:block;
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
min-width: 100%;
min-height: 100%;
z-index: -1000;
overflow: hidden; }
Again, I don't have an iPad with me to test.
Hope this helps!
Good luck
Related
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
I am developing a web app and running into a problem on iOS: at the bottom of the page, when I scroll down further, the grey bar with the settings icon is moving up with the rest of the page, even though it's "position: fixed". I need it to stay in place.
This is NOT happening when the page is opened in Safari, only after adding it to the home screen and opening it from there.
I am using the following meta tags:
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
The grey bar's CSS looks like this
#bottom-menu {
position: fixed;
bottom: 0;
width: 100%;
height: 50px;
display: flex;
align-items: stretch;
background-color: #222;
}
I am working on an quiz application and I am trying to make it responsive so that it looks good on all devices. The application is an html5 application and is contained in an iframe and set to fill the entire iframe. The native width of the application is 640px and the height is 880px (this is how I calculated the padding-bottom to be 137.5%). It works great on computers and on Android devices but it does not work on iOS devices. Everything I'm reading seems to suggest that I've done it correctly but on the iphone the application is too wide for the screen in portrait mode.
Here is the html code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="iframeresponsive_mobile.css" rel="stylesheet" type="text/css">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Student Quizzes</title>
</head>
<body>
<!--comment: this next section makes a container div for the page with a max width (defined by css)-->
<div class="pagecontainer">
<div class="intrinsic-container"><!--comment: iframe div begins-->
<iframe src="scrolling/index.html">
Your browser does not support inline frames or is currently configured not to display inline frames.
</iframe>
</div><!--comment: iframe div ends-->
<div class="ad"> <!--comment: ad div starts-->
This is an add div...
</div><!--comment: ad div ends-->
</div><!--comment: pagecontainer div ends-->
</body>
</html>
and here is the CSS code:
body {
margin-left: auto;
margin-right: auto;
background-color: black;
}
.intrinsic-container {
position: relative;
clear:both;
height: 0;
overflow: hidden;
/* to get padding-bottom divide the numbers of aspect ratio */
padding-bottom: 137.5%;
z-index: 3;
margin-left: auto;
margin-right: auto;
max-width: 640px;
}
.intrinsic-container iframe {
position: absolute;
top:0;
left:0;
width: 100%;
height: 100%;
border:0px;
margin:0px;
}
.ad{
background-color:lime;
height:80px;
width:100%
}
/* comment: page formatting make a container to constrain width and center */
.pagecontainer {
margin-left: auto;
margin-right: auto;
max-width: 640px;
}
I have included (to my knowledge) the correct meta viewport tag. Why does this work so well in Android but fails in iOS?
I found that the solution was to add the following code to the canvas element on the page
style="width: 1px; min-width:100%"
I had seen this code on stack overflow before but it didn't work until I added the above css to the canvas. I hope this helps someone with a similar problem.
Brett
I'm trying to do a very simple task since 2 days while learning Jquery Mobile framework !!!
How to add a custom icon and a centered title inside the header bar of a JQuery page .. ?
There's a lot of post and all refers to "button" icons, that's not my goal.
I just want to set a custom IMAGE on the left side of my header ... as 99% of any web application I think.
Why is it so hard to put in place such basic things ?
I tried this following official doc and posts:
HTML
<html><head>
<title>JQM</title>
<meta name="viewport" content="width=device-width, user-scalable=no , initial-scale=1"/>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8"/>
<link rel="icon" type="image/icon" href="/images/favicon.ico"/>
<link href="/css/steel/jquery.mobile-1.4.2.min.css" rel="stylesheet" type="text/css"/>
<link href="/css/site-mob.css" rel="stylesheet" type="text/css"/>
<script src="/js/jquery-1.10.2.min.js" type="text/javascript"> </script>
<script src="/js/jquery.mobile-1.4.2.min.js" type="text/javascript"> </script></head>
<body><section data-role="page" id="main-page">
<header data-role="header" id="top" data-icon="myimage"><h1>Page Title</h1></header>
<div id="content" data-role="content"/>
<div id="footer" data-role="footer" data-theme="a"/></section></body></html>
CSS (/css/site-mob.css)
.ui-icon-myimage {
background: url(/images/myimage.png) 50% 50% no-repeat;
background-size: 38px 38px;
}
but it doesn't work. No image displayed. .... I'm certainly missing something ..
Thanks for your help
To put an image/logo in the header you do not need to use a custom icon, just place an img tag within an absolutely positioned container:
<header data-role="header" id="top" data-icon="myimage">
<span style="position: absolute; left: 0; top: 0;"><img src="http://lorempixel.com/38/38/business/2/" alt="" /></span>
<h1>Page Title</h1>
</header>
In this example, I am using a SPAN absolutely positioned to the top left corner of the screen. You can adjust LEFT and TOP or the margins to place it as desired.
To create custom icons in jQM 1.4, use the :after pseudo tag:
.ui-icon-myimage:after {
background: url(http://lorempixel.com/38/38/business/1/) 50% 50% no-repeat;
background-size: 38px 38px;
background-color: transparent;
border-radius: 0;
}
Setting the background to transparent and border-radius to 0 removes the rounding and the gray background disk.
To display the icon inline (not on a button), you can do this:
<span class="ui-icon-myimage ui-btn-icon-notext inlineIcon"></span>
Then add CSS for inLineIcon:
.inlineIcon {
display: inline-block;
position: relative;
vertical-align: middle;
margin-right: 6px;
}
DEMO of both image in header and inline custom icon
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"/>