YouTube embedded videos wont play in modal window in IE8 - javascript

In Firefox, IE7, IE9 and other browsers, YouTube embedding works fine, but in IE8 nothing happens when you click the video.
I'm thinking its a CSS issue to do with Z-index perhaps? I've tried changing things around but had no luck.
Any help would be great. Visit the page and click the images to see the problem.
Here is the CSS for the modal:
.youtubemodal {
width: 590px;
height: 464px;
position:fixed;
z-index:700;
top:180px;
left:50%;
display:none;
background-image: url('images/youtubeconsole.png');
margin-left:-295px;
}
.youtubediv {
position:absolute;
left:15px;
top:15px;
}
.youtubexbutton {
bottom: 12px;
right:13px;
position:absolute;
width:26px;
height:26px;
background-image:url('images/youtubex.png');
}
and the script:
jQuery('#youtube').click(function(){
jQuery('.youtubemodal').show();
});
and the HTML:
<div class="youtubemodal"><div class="youtubediv"><iframe width="560" height="400" src="http://www.youtube.com/embed/G5FRxH8ytJk" frameborder="0" allowfullscreen></iframe></div>

Use this after the <head> tag
<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>

Solved it: my youtubediv had no width or height so I changed it to cover the size of the YouTube video.

Related

IFrame height issues on iOS (mobile safari)

Example page source:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Page</title>
</head>
<body>
<div class="main" style="height: 100%;">
<div class="header" style="height: 100px; background-color: green;"></div>
<iframe src="http://www.wikipedia.com"
style="height: 200px; width: 100%; border: none;"></iframe>
<div class="footer" style="height: 100px; background-color: green;"></div>
</div>
</body>
</html>
The problem is, that height of 200px from the IFrames inline style is ignored on mobile safari:
Also I'd like to change the height of the IFrame dynamically via vanilla JavaScript which is not working at all with the following code:
document.getElementsByTagName('iframe')[0].style.height = "100px"
The value of the height style is changed correctly according to the dev tools but it's simply ignored since the actually rendered height of the IFrame doesn't change.
This only seems to be a problem in mobile Safari and is working as expected on the latest versions of desktop Safari, Firefox, Chrome, Androids WebView etc.
Testpage: http://devpublic.blob.core.windows.net/scriptstest/index.html
Ps.: I tested this with various devices on browserstack and also took the screenshots there since I don't have no actual iDevice at hand.
It looks like this: How to get an IFrame to be responsive in iOS Safari?
iFrames have an issue on iOS only, so you have to adapt your iframe to it.
You can put a div wrapping the iframe, set css on the iframe and, what worked for me, was to add: put the attribute scrolling='no'.
Wishing you luck.
I got the same issue. And after tried all solutions I could find, I finally found how to solve it.
This issue is caused by the iOS Safari, it will auto-expend the hight of iframe to fit the page content inside.
If you put the scrolling='no' attribute to the iframe as <iframe scrolling='no' src='content.html'>, this issue could be solved but the iframe could not show the full content of the page, the content which exceeds the frame will be cut.
So we need to put a div wrapping the iframe, and handle the scroll event in it.
<style>
.demo-iframe-holder {
width: 500px;
height: 500px;
-webkit-overflow-scrolling: touch;
overflow-y: scroll;
}
.demo-iframe-holder iframe {
height: 100%;
width: 100%;
}
</style>
<html>
<body>
<div class="demo-iframe-holder">
<iframe src="content.html" />
</div>
</body>
</html>
references:
https://davidwalsh.name/scroll-iframes-ios
How to get an IFrame to be responsive in iOS Safari?
Hope it helps.
PROBLEM:
I was having the same issue. Sizing/styling the iframe's container div and adding scrolling="no" to the iframe didn't work for me. Having a scrolling overflow like Freya describes wasn't an option, either, because the contents of my iframe needed to size depending on the parent container. Here's how my original (not working, overflowing its container) iframe code was structured:
<style>
.iframe-wrapper {
position: relative;
height: 500px;
width: 100%;
}
.iframe {
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
}
</style>
<div class="iframe-wrapper">
<iframe frameborder="0" scrolling="no" class="iframe" src="content.html"></iframe>
</div>
SOLUTION:
This super simple little CSS hack did the trick:
<style>
.iframe-wrapper {
position: relative;
height: 500px;
width: 100%;
}
.iframe {
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100px;
min-width: 100%;
height: 100px;
min-height: 100%;
}
</style>
<div class="iframe-wrapper">
<iframe frameborder="0" scrolling="no" class="iframe" src="content.html"></iframe>
</div>
Set the iframe's height/width to some small, random pixel value. Set it's min-height & min-width to what you actually want the height/width to be. This completely fixed the issue for me.

How to have an iframe fill up the entire mobile web page after setting a negative top margin

I currently have an iframe filling up my whole page, but I want to give it a -40px top margin to make it look better.
The iframe is on a mobile page and it's 640px width and 100% height.
I tried to do: height="calc(100% + 40px)" but that did not seem to work, instead it gave me the width of a small bar at the top of my page.
But this is essentially what I want, I want to iframe to extent to the bottom of the page after bumping it up 40px.
Please someone save my day here haha!
code:
<html>
<meta content='width=350px, user-scalable=0' name='viewport' />
<body style="margin: 0; height: 100%;">
<iframe style='margin-top: -40px;'
src="URLHERE"
frameborder="0"
width="350px"
height="100%">
</frameset>
</body>
</html>
</iframe>
You need to do what #APAD1 said PLUS adding the 40px to your 100% height. However, this will move your scrollbar up 40px as well and could initially hide it. Here is a full blown full width/height iframe solution, with -40px top:
html, body
{
height: 100%;
overflow: hidden;
}
.iframe
{
position:absolute;
top:-40px;
left:0;
width:100%;
height:calc(100% + 40px);
}
Fiddle here: http://jsfiddle.net/60xs8bro/

Applying CSS (a vertical line) to an iFrame from the parent document

I have an 'Export Text/PDF to Excel' functionality in my webapp. I display the original report in the same domain to be exported to excel in an iFrame inside a jsp(parent doc)
<iframe name="imgbox" id="imgbox" scrolling="yes" width="80%" height="400" src="/xxx/xx.txt" ></iframe>
In the existing page, I ask the users to click the positions/points inside the iFrame for column splitting i.e., the text between 2 selected split points form a column in the resultant excel sheet and I record the positions using jQuery's event.pageX. NOW WHERE I NEED HELP is that I want the selected positions to be highlighted by vertical, colored thin lines as a column marker from the top edge to the bottom edge of the iFrame
This is what I want:
Click to view the resultant jsp page
Some one please help!!!
Ended up positioning the elements over each other, the text file was a random file I selected from google. You will have to track the clicks but the hard part is done an the code could be a little cleaner but it answers your problem I hope.
Answer requires jQuery
Live demo: http://jsfiddle.net/3aQC4/1/
<html><head>
<style>
#con, .line{
display:block;
position:absolute;
top:0;
left:0;
height:300px;
width:600px;
border:1px solid black;
z-index:10;
background-color:transparent;
}
.line{
border:none;
border-right:1px solid black;
z-index:5;
}
iframe {
position:absolute;
top:0;
left:0;
z-index:1;
height:300px;
width:600px;
}
</style>
</head>
<body>
<div id="con"></div>
<iframe class="stack" src="http://textfiles.com/bbs/dljunkie.txt"></iframe>
<script>
$('#con').click(function(e){
var html='<div style="width:'+e.offsetX+'px;border:1px solid red" class="line"></div>';
$('body').append(html);
});
</script>
</body>
</html>

Custom scrollbar jScrollPane appears twice in iframe

I have a problem with a custom scrollbar appearing twice in an iframe.
The scrollbar looks OK in IE, but not in Chrome, Firefox and Safari.
Here you can have a look to the page:
http://tenforty.ch/index.php/setlist
I have the following code in my iframe:
<style>
iframe {
overflow:hidden;
}
</style>
<iframe scrolling="no" width="690" height="680" frameborder="0"
src="templates/musicband/setlist.html"></iframe>
Here is the code in my html file:
<style type="text/css" id="page-css">
/* Styles specific to this particular page */
.scroll-pane
{
width: 690px;
height: 680px;
overflow: hidden;
}
</style>
I tried out with different widths and hights, tried also 100%. But it looks even worse when changing this.
Here you can see a printscreen how it sould look like (taken in Internet Explorer):
http://www.tenforty.ch/scrollbar.jpg
Can you help me out?
Thanks!
Swiz
The reason you get two scrollbars is because the page you link to in the iframe (http://tenforty.ch/templates/musicband/setlist.html) is also creating a scrollbar:
$(function() {
$('.scroll-pane').jScrollPane();
});

How to make google earth iframe shim semi-transparent

I am attempting to implement a iframe shim to render custom html content on top of the google earth plugin. I am successful in rendering the overlay, however I would also like to make both the iframe and custom html semi-transparent. The custom html content does not render when setting "allowTransparency" to true and lowering the opacity of the iframe.
Below is sample code
<body>
<div id="earth"></div>
<iframe allowTransparency="true" style="position:absolute; top:0px; bottom:0px; right:0px; width:200px; height:500px; background:#222; opacity:0.5; border:none; z-index:100;"></iframe>
<div id="shimdiv" style="position:absolute; top:0px; bottom:0px; right:0px; width:200px; height:500px; background:#222; opacity:0.5; border:none; z-index:100;"></div>
</body>
All the examples I have found render full opacity html content. Does anyone know of a work around to allow for transparency?
Thanks in advance.

Categories