I'm building a website with a HTML5 video embedded on the homepage. The video displays fine on desktop browsers. It is coded to be 100% of the width of the container in which it sits and the site is responsive (bootstrap). My issue is that on iPad, the dimensions are defaulting to small size (150px height, don't recall the width and it looks ridiculous. I have tried to define a size within the HTML, this hasn't worked.
<video width="1024" height="768" poster="images/video-placer.png" controls autoplay >
<source src="video/video.mp4" type="video/mp4">
<source src="video/video.webm" type="video/webm"></video>
The CSS for the video tag is width:100%; height:auto;
Am I missing something obvious here?
I've had this issue in the past with some YouTube embeds. I solved it by adding this CSS class to my main stylesheet:
html, body { height:100%; }
Hope it helps you out.
Related
I can't seem to figure out why I am having issues with an embedded PDF in a simple HTML page on ONLY iOS devices (iPad/iPhone). Android and PC are fine. On iOS devices it renders the PDF on the page as what appears to be a PNG file. It only renders the first page of the PDF. Scrolling doesn't work, neither does tap and hold. The browser doesn't see it as a PDF. I've tried:
<object data='edoc.pdf'
type='application/pdf'
width='100%'
height='700px'>
</object>
Even tried an iFrame/DIV and while I can get the frame to scroll, it's only when I shrink the frame smaller than the "pdf" is renderd and it simply scrolls the single image around.
<style type="text/css">
.scroll-wrapper {
display: inline-block;
-webkit-overflow-scrolling: touch;
overflow-y: scroll;
}
.scroll-wrapper, .scroll-wrapper {
width: 400px;
height: 400px;
}
</style>
<div class="scroll-wrapper">
<iframe src="edoc.pdf" id="test" ></iframe>
</div>
I'm at a loss. My application needs to use an embedded PDF but I need to figure out why the iOS devices are such a hassle. This behavior has been repeated on Safari, Chrome, Firefox. On iPhone and iPad. Version has been consistently iOS 10+. I've checked the web server mime type is setup properly for PDF. I've tried multiple PDF's from multiple locations.
Linking to the PDF
<a href='edoc.pdf'>PDF Name</a>
Works just fine. I'm lost. Help.
Any help is welcome.
I have a video that I have positioned as a background to my website, however on mobile devices, specifically iOS-based devices, it is showing a video button in the middle of where the video should be playing. I'm not bothered about the video playing on mobiles, as I have a poster image fallback. I just wish to remove the button. I have tried the following, after searches here on SO, without any luck:
video {
&::-webkit-media-controls {
display:none !important;
}
&::-webkit-media-controls-start-playback-button {
display: none!important;
-webkit-appearance: none;
}
}
Anything else I can try? I am testing on iPhone 6, though have access to other devices on Browserstack.
Just use
<video webkit-playsinline ></video>
Appears the code in my question DID work after all, I had an unrelated issue with caching that was preventing some changes from showing(!)
After trying several solutions on the internet and without success, I eventually managed to hide the video interface elements in autoplay when the save mode is enabled.
worked on iOS 15.
document.getElementById("hello").setAttribute("autoplay", "autoplay");
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<video id="hello" playsinline preload muted loop>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
</body>
</html>
https://jsfiddle.net/joelsilvaaaaaa/yb5s23xq/3/
I'm developing a website for my company, and there is a page that has 8 videos, using HTML5 video tag. It looks like this:
<div style="CLEAR:both; text-align: center; max-width: 100%; ">
<video preload="none" id="video1" width="480" height="360" controls poster="/images/video_thumbnails/poster1.png">
<source src="/videos/video1.mp4" type="video/mp4">
Please update your browser.
</video>
</div>
This is my CSS:
video {
width: 482px;
height: 362px;
padding: 2px;
background-color: black;
}
All my videos and posters are 480x360pixel in size. It looks fine on popular browsers, but on iPad 7, in Portrait mode only, one of the 8 videos always have wrong size like this:
If I rotate my iPad to landscape, it's ok. If I play that bugged video, the video only plays in 480x360 frame, the remaining black border just stays there. And the poster is gone, too, in both Portrait or Landscape.
Found the problem. It may seem weird, but you need to... restart iPad to fix it! There are also other questions similar to this problem, and I followed their answer.
I have a fairly strange issue that I'm experiencing with jquery mobile / phonegap and IOS.
I've created a web app with html / css and so far it works exactly as expected on android, (The content scrolls vertically in the viewport) however on ios (my test platform is an iphone 4s), the page is limited vertically to the viewport. It scrolls just fine, but all content that sits below the viewport vertically get's cut off, IE the only content that will display is what I see in the upper half of the page, nothing below the viewport will display.
an excerpt from my css file:
html, body {
min-height:100%;
overflow-x:hidden;
background-attachment:fixed;
}
body {
-webkit-touch-callout: none;
-webkit-text-size-adjust: none;
-webkit-user-select: none;
-webkit-font-smoothing: antialiased;
-webkit-backface-visibility: hidden;
-webkit-overflow-scrolling: touch;
}
and my html page, in the head section:
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1 minimum-scale=1; user-scalable=no" />
Here's a couple screenshots of the problem in action:
As you can see from the screen shots, the gradient "should" fill the whole page (ie, expand with content), and it doesn't as there seems to be a hard cutoff at the viewport edge, so any more than a single page of content is not getting displayed. While it's not visible in these screenshots the vertical scrollbars are appearing as they should and the scrolling works fine, just no content is displayed "below the fold".
I am not using iScroll or any other scrolling scripts, just fyi.
I'm not sure if this is some sort of height issue, as I have a min-height:100%; set on the html and body of the page, or if it's some sort of width-device-width issue in the meta tag? I also do not believe I have any overflow-y:hidden set, as that would have limited the content on other platforms, and they work perfectly.
I feel like I must be missing something really basic, as I'm sure it's got to be some sort of css setting somewhere that's limiting the content to the viewport only, and an exhaustive google search could find no similar issues.
Check if your apps default orientation is set to portrait instead of landscape, or if it even supports the portrait orientation. It almost looks like its displaying the app as if its in landscape mode while its clearly in portrait. You can find the available orientation in the Target>General tab, or in the info.plist.
So I've fixed it, and the weird thing is, I'm not exactly sure what I did to fix the issue.
I moved the .ui-page selector from the jquery-mobile file to my own css file, removed the min-height from the html selector and killed the overflow-x from the html, body selectors and boom, it now appears to be working as intended. Wacky... but hey, a win is a win. :)
I have faced a pretty strange issue. I'm trying to display pdf files using iframe. Little documents, consisting of 1-2 pages, are displayed correctly. But when it comes to documents consisting of for example 5 "heavy" pages, the iframe doesn't display the whole document - the document is cropped and as a result about 2-3 pages are displayed only.
Below is my code. As you can see it's pretty straightforward.
<html>
<head>
<title>Testing iFrames on iPad</title>
</head>
<body>
<iframe id="iframe" name="iframe" height="100%" width="100%" scrolling="no" src="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/SafariWebContent.pdf" />
</body>
Can anyone help me to find out what is the reason for such strange behavior?
From what I understand iframe's height is what's responsible for the page cutting off, as you're actually scrolling the frame, and not the pdf inside the frame (i.e. setting height to "400%" will potentially give you the space you need, but it's sloppy).
This solution uses JavaScript to scroll the pdf contents itself, and may help:
how to properly display an iFrame in mobile safari