I have problem with html page with <object><embeded> video and lightbox2 plugin for pictures. These two component not going very well on the iPad, because when I click on thumb image and lightbox2 comes up, lightbox is under embeded video.
How can it be fixed?
Ofcourse the right version could be that embeded video will under lightbox.
I see on lightbox.css file and z-index: 100;
Already trying <param name="wmode" value="transparent"></param> for embeded video.(youtube video), but no success
And one very important note. In computer desktop browser it's going good. So only on the iPad it's showing bad.
Related
I have a same layout on homepage and test page. The problem appears only on iOS: the video plays on the test page, but not on the homepage. Nothing in the console. Same html, same js, same css, same video file, same poster, etc...
Any idea ?
Cheerz
Well, my bad... there was a little CSS difference between the two pages : the home page had a position: fixed element as deep parent.
So the lesson is : no position: fixed on (deep) parent of the <video> tag if iOS is needed.
I'm writing an app which uses html5 video elements.
On iOS Safari when using playsinline to ensure the video is treated as an inline element for positioning etc, it works as expected except that the video appears on top of everything. z-index and positioning techniques don't seem to help with this issue. I cannot get anything to appear on top of the video under any circumstances.
On every browser except iOS Safari this seems to work absolutely fine.
For reference, this is an Angular app, and I'm currently testing in Mobile Safari on iOS 11.1.2
Also worth mentioning, the video src will resolve to a local blob url. eg. blob:file:///2afb998a-84e3-4819-8243-5da7d7da3cb6
<video
id="video"
[src]="src"
autoplay="autoplay"
muted="muted"
webkit-playsinline
playsinline>
</video>
I had the same problem. Removing overflow style from parent div of video tag solved it. See Video and z-index inside scaled element: some divs disappear for more information.
I'm developing an ionic app in iOS, I placed the pdf inside an iframe just by simply doing the following:
<iframe src="https://docs.google.com/gview?embedded=true&url=http://example.com/resources/myfile.pdf" mozallowfullscreen marginwidth="2" marginheight="2" width="90%" scrolling="auto"></iframe>
I didn't used cordovaInAppBrowser because I ran a lot of problem like after clicking the button the InAppBrowser doesn't open unless I don't minimize the app. So I just used iframe as the workaround. But the problem now is that, after the pdf being loaded, and the user clicks on the full screen of pdf, there's no back button. Is there a way I can remove the full screen button from the pdf or add a back button on full screen mode of pdf? I tried removing the mozallowfullscreen but doesn't work since it's for the iframe not for the pdf.
P.S.
I tried accessing the div inside the iframe that holds the button for full screen, but no good, it doesn't get the div, it's probably because I'm violating the Same Origin Policy.
Here's the code on how I tried to access the div:
$('#myframe').each(function(){
console.log($("div[role='toolbar']"));
});
good day.
on ipad, scaling iframes using -webkit-transform: scale(2) corrupts iframe's clickable area:
click a link fails and shows the marked clicked area
in a different location from the link.
only on ipad. http://jsfiddle.net/adamhor/PCpuV/
.
$("iframe").contents().find("body").html('<br><br>'+
'link1<br>'+
'link2');
$("iframe").css({
'-webkit-transform': 'scale(2)',
'-webkit-transform-origin': '0 0'
});
i saw this solution CSS3 Transform scaling issue on IPad Safari
but i cant access iframe itself because of cross domain (i rather not get into)
thanks in advance!
I am currently having some trouble displaying a you tube video on my custom fan page. I am using Static HTML I Frame Tab to embed this code. The problem is that the facebook notifications or search drop down menu continues to go behind y you tube video when using IE.
I have included param name="wmode" value="transparent" within the embeded you tube code but for whatever reason the fb drop down menu continues to go behind the video. The fan page is https://www.facebook.com/blaineostrander
Again, this issue only seems to be happening in IE
Thank you in advance
Into src in iframe put ?wmode=opaque
Ex :
<iframe width="420" height="315"
src="http://www.youtube.com/embed/pVllEZirODQ?wmode=opaque"
frameborder="0" allowfullscreen>
</iframe>
Works great for me