This works fine in any Browser, but not on iOS6 (did not try it with iOS5)
I got an iFrame with a YouTube Video in it, situated in an overlay. After playing the video and toggle the overlay, the video again is broken. The video will playback in the background (you will hear the sound), but its not visible anymore.
Here's a minimal example:
http://jsfiddle.net/s9M6J/2/
<script>
/* jQuery */
$(document).ready(function() {
$('a').click(function() {
$('.videowrapper').toggleClass('hidden');
});
});
</script>
<style>
.hidden{
display: none;
}
</style>
<body>
toggleVideo
<div style="background: green; width: 500px; height: 500px;">
<div class="videowrapper">
<div id="video1">
<iframe width="500" height="315" src="http://www.youtube.com/embed/HMrlFLZFdnQ" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
</body>
Does anyone know a workaround for that?
Got a similar issue when embedding a Brightcove video on a jQuery Mobile page which is shown/hidden via javascript. Works on all desktop browsers and android but not Safari on iOS 6.
According to http://forum.brightcove.com/t5/General-Development/Video-in-show-hide-div-does-not-play-on-iOS/m-p/17558#M2352 a workaround is to hide your videowraper by moving it out of the screen using some CSS like position:absolute;top:-9999px then back to normal positioning when you want to show it.
For jQuery Mobile users it means embedding video iframes on multiple <div data-role="page"> on a single page structure won't work, need to put them on separate html pages.
Related
I'm creating a site using Angular 2, I successfully included a Google Form inside using an iFrame. It's working perfectly on every browser I tested (Firefox, Opera, Chrome) on my laptop (linux) and on my phone (android).
However, it's not working on iOS. The iframe is diplayed and can be scrolled (screenshot) but it's too large for the screen, it's not responsive at all. Here is what it looks like on my tablet (android).
I tried fixing it by looking at a dozen stackoverflow answers, but so far I've only managed to make the iframe scrollable by adding the last line of CSS. It's been a month now that I'm stuck with the iframe like this and I'm becoming a bit desperate!
Setting the width of the iframe manually to an absolute value has no effect on iOS (but it does have one on my phone).
This is the CSS of the div that contains the iframe:
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: 100%;
width: 100%;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
and this is the CSS of the iframe itself:
max-width: 100%;
min-width: 100%;
height: 100%;
Here is the HTML part containing the iframe:
<div class="frame-flex">
<iframe src="https://docs.google.com/forms/whatever/viewform?embedded=true" frameborder="0" marginheight="0" marginwidth="0">Loading...</iframe>
</div>
I must add that I'm a beginner in HTML/CSS (in case you're wondering why the CSS is ugly). Thanks for your time anyway!
PROBLEM:
Google is aware of google forms not being responsive on IOS: https://productforums.google.com/forum/#!topic/docs/8UG9CQmgzY0
Essentially, the embedded google form works fine on desktop but has no scrolling options on mobile. On my IOS 9 tests on ipad, Safari would also crash. Bootstrap4 and Angular tests I conducted found that embedded iframe google forms were also non responsive and no scroll bar.
WORKAROUND:
You can still use the following on IOS if your web page does not use ONE OF THE FRAMEWORKS ABOVE (this also allows for a top navigation bar):
<style>
#all{
width:100%;
height: 100%;
float:none;
text-align:center;
}
</style>
<div id="all">
<iframe src="https://docs.google.com/forms/d/e/1FAIpQLSf-TDDGGzhgIpQLSfwA7QGFQLSf9IpQLSf/viewform" frameborder="0" marginheight="0" marginwidth="0" ></iframe>
</div>
FINALLY (though not directly related to google forms): Check these stackoverflow links:
how to properly display an iFrame in mobile safari
How to get an IFrame to be responsive in iOS Safari?
I want to add youtube video on website. I want, There will have only control panel. and need to hide top title and logo.
But If hide the title, then never hide logo / watermark logo.
But I need to hide twice (title+logo).
How can I do this ?
This is my code:
<iframe width="560" height="315" src="https://www.youtube.com/embed/Oo00q-l8VKQ?modestbranding=1&autoplay=0&rel=0&showinfo=0" frameborder="0" allowfullscreen>
</iframe>
Try try this jsfiddle.net
<style>
.video-wrapper {height: 153px; width: 272px; position: relative; overflow:hidden}
#YouTubeVideo1 {height: 262px; width: 272px; position: absolute; margin-top:-55px}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="video-wrapper">
<iframe id="ytplayer" type="text/html" width="272" height="252"
src="https://www.youtube.com/embed/M5h3U_nNn3k?autoplay=1&controls=0&fs=0&rel=0&showinfo=0"
frameborder="0" allowfullscreen></iframe>
</div>
As you should have read from HERE, it is not possible to remove ALL branding from the player window.
It is a corporate product that they have made. As such they advertise that it is their player (from their site) for their use with sharing functionality for us.
Considering the work that goes into a product like the YT-Player, and that they give us so much access to the api. I think it is reasonable.
If you do not want any branding, you should have your own player and content.
Hi I'm working in Cordova/Phonegap and JqueryMobile. I have a div and a iframe here's the code. there is no cross domain issue in Cordova but in browser i cant show any one my working code but still here's the jsfiddle code
<div id="viewsites" class="viewsites">
<iframe class="clsIframe" src="http://www.google.com/" id="viewsite_iframe" width="0"></iframe>
</div>
i dont want to show scrollbars so i have set parent div overflow: hidden,
now problem in in iphone i cant drag the iframe site
I want to hide scrollbars without stopping scrollable
Use CSS:
iframe {
overflow:hidden;
}
In your iframe html tag:
<iframe src="" scrolling="no"></iframe>
I am using jquery mobile and wanted a overlay in to be visible when ever i need. I have this at first in my html
<body>
<div id="overlay"></div>
</body>
(if you are wondering about other pages then they are added afterwards)
but when jquery mobile 1.4.2 initializes it turns my div in to a page like so:
<div data-role="page" data-url="/" tabindex="0" class="ui-page ui-page-theme-a" style="min-height: 640px;">
<div id="overlay">
</div>
</div>
How can i make Jquery not touch this element?
Let me guess you are using it to show a splash screen.
jQuery Mobile requires at least one page to exist during initialization.
To solve this problem add one dummy jQuery Mobile page and just set it CSS to display: none; something like this:
<body>
<div id="overlay"></div>
<div data-role="page" style="display: none;">
<div/>
</body>
I seems it only does it if there are no pages initially in the body. but if you add a blank page every works fine:
<div data-role="page"></div>
Within our web application we are displaying a PDF document in an iframe using the following line of code:
<iframe id="iframeContainer" src="https://example.com/pdfdoc.pdf"
style="width:100%; height:500px;"></iframe>
This works fine in all the major desktop browsers with the width of the PDF scaling to fit inside the confines of the iFrame and a vertical scroll bar to view all the pages within the document.
At the moment however I can't get the PDF to display correctly in Mobile Safari. In this instance only the top left portion of the PDF is visible without any horizontal or vertical scrollbars to see the rest of the document.
Does anybody know of I workaround for this problem in Mobile Safari?
UPDATE - MARCH 2013
After hours of searching and experimentation I can conclude that this problem is a real mess!! There are a bunch of solutions but each far from perfect. Anybody else struggling with this one I advise to refer to 'Strategies for the iFrame on the iPad Problem'. For me I need to write this one off and look for another solution for our iPad users.
UPDATE - MAY 2015
Just a quick update on this question. Recently I have started using the Google Drive viewer, which has mostly solved the original problem. Just provide a full path to the PDF document and Google will return a HTML formatted interpretation of your PDF (don't forget to set embedded=true). e.g.
https://drive.google.com/viewerng/viewer?embedded=true&url=www.analysis.im%2Fuploads%2Fseminar%2Fpdf-sample.pdf
I'm using this as a fallback for smaller viewports and simply embedding the above link into my <iframe>.
I found a new solution. As of iOS 8, mobile Safari renders the PDF as an image within an HTML document inside the frame. You can then adjust the width after the PDF loads:
<iframe id="theFrame" src="some.pdf" style="height:1000px; width:100%;"></iframe>
<script>
document.getElementById("theFrame").contentWindow.onload = function() {
this.document.getElementsByTagName("img")[0].style.width="100%";
};
</script>
<iframe
id="ifamePdf"
type="application/pdf"
scrolling="auto"
src={"https://docs.google.com/viewerng/viewer?url="+"https://example.com/pdfdoc.pdf"+"&embedded=true"}
height="600"
></iframe>
My solution for this is to use google drive on mobile and a standard pdf embed in an iframe on larger screens.
.desktop-pdf {
display: none;
}
.mobile-pdf {
display: block;
}
#media only screen and (min-width : 1025px) {
.mobile-pdf {
display: none;
}
.desktop-pdf {
display: block;
}
}
<div class="outer-pdf" style="-webkit-overflow-scrolling: touch; overflow: auto;">
<div class="pdf">
<iframe class="desktop-pdf" scrolling="auto" src="URL HERE" width="100%" height="90%" type='application/pdf' title="Title">
<p style="font-size: 110%;"><em>There is content being displayed here that your browser doesn't support.</em> Please click here to attempt to view the information in a separate browser window. Thanks for your patience!</p>
</iframe>
<iframe class="mobile-pdf" scrolling="auto" src="https://drive.google.com/viewerng/viewer?embedded=true&url=URL HERE" width="100%" height="90%" type='application/pdf' title="Title">
<p style="font-size: 110%;"><em>There is content being displayed here that your browser doesn't support.</em> Please click here to attempt to view the information in a separate browser window. Thanks for your patience!</p>
</iframe>
</div>
</div>
For using the google preview in 2021, I had to do the following. Some small adjustments to how it was posted above.
"https://drive.google.com/viewerng/viewer?embedded=true&url=" + encodeURIComponent(pdfUrl)
try pdf.js should also work inside mobile safari: https://github.com/mozilla/pdf.js/
I got the same issue. I found that by setting the focus on an input (doesn't work with div tags) the pdf is displayed.
I fix it by adding an hidden input and set the focus on it. this work around doesn't slowdown the application.
<html><head>
<script>
$(document).ready(function () {
$("#myiframe").load(function () { setTimeout(function () { $(".inputforfocus").focus(); }, 100); });
});
</script></head>
<body>
<div class="main">
<div class="level1">Learning</div>
<input type="hidden" class="inputforfocus">
<div>
<iframe src="PDF/mypdf.pdf" frameborder="0" id="myiframe" allow="fullscreen"></iframe>
</div>
</div>
</body>
</html>