I have a flash video player that I would like to embed in other pages, so I created an iframe to do this. It has to be an iframe because it depends on other swf files that get loaded into it (plugins).
The weird thing is the video does not play when loaded inside the iframe, but if I go to the html source and cut and paste the tag outside of the iframe it works.
<iframe width="500px" height="500px" src="http://somedomain.com/embed.aspx" ></iframe>
Check your console. If you are also getting these errors:
"Blocked script execution in '...' because the document's frame is sandboxed and the 'allow-scripts' permission is not set."
You can configure those sandbox flags on the iframe
<iframe width="100%" sandbox='allow-scripts allow-same-origin'></iframe>
Got it working by adding come css to the html page containing the flash player. It seems the absolute positioning made all the difference.
html, body, object { margin: 0px; padding: 0px; position: absolute; height: 100%; width: 100%; overflow: hidden; background-color: #000; }
Related
I have used the following simple iframe to embed a Google map on my website. I can not interact with embedded map such as zoom, click, pan etc.
I have also added sandbox="allow-forms allow-modals allow-scripts" but no change. It seems working in the following snippet but not on my website
<iframe height="450" src="https://www.google.com/maps/embed?pb=
!1m18!1m12!1m3!1d2543.41275071
!2d51.17525880000005
!3d35.72279246142077!2m3!1f0!2f0!3f0!3m2!1i1024!2i768
!4f13.1!3m3!1m2!1s0x0%3A0x61de87510eccb16!2z2LPZhdin2YjYsSDZvtmE2KfZhiwgVGVocmFuLCBJcmFu
!5e0!3m2!1sen!2sau!4v1471218824160"
style="max-width: 100%; width: 100%; border: none; padding: 0px; margin: 0px; height: 450px;" sandbox="allow-forms allow-modals allow-scripts">
</iframe>
The problem was another graphical DIV with relative position on the main layer. I have set style="pointer-events:none" on that DIV and done.
According to this page -
http://docs.brightsign.biz/display/DOC/HTML5+Video
you should be able to play a video stream in html just like this right ?
<video src="udp://239.192.1.1:5004" brightsign-properties="StreamTimeout:0;StreamLowLatency:0;">
i have built my html page, and when I inspect it, I have this in my body -
<div id="rightPane" style="position: absolute; top: 20%; left: 50%; width: 50%; height: 80%; background-color: green; visibility: visible;">
<video src="udp://224.0.0.1:9999" brightsign-properties="StreamTimeout:0;StreamLowLatency:0;" style="width: 100%; height: 100%;">
</video>
</div>
however when my page loads I get the error ,
GET udp://224.0.0.1:9999 net::ERR_UNKNOWN_URL_SCHEME
any idea on why it says unknown url scheme? is that page wrong in how I have to specify the udp url or?
thanks for any help.
The tag implementation is browser specific. I doubt you'll find much more than HTTP. I think FireFox supports RTSP.
I'd be surprised if you find wide browser support outside of HTTP.
I have a video in my Project directory under folder name Video and Video name Sapno.MP4.Now i have to add this Video in my webpage . Currently i have added you tube video in it and it is getting displayed and played properly but now i want to replace it with my local project directory video.
Here is the HTML that i am using..
<div style="position:relative; width: 100%; height: 0; padding-bottom: 56.25%;"><iframe width="420" height="315" src="//www.youtube.com/embed/sP4NMoJcFd4" frameborder="0" allowfullscreen style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe></div>
Please help me to get it corrected ..Thanks..
set the SRC attribute to Videos/Sanpo.mp4.
Another option is to use the HTML5 video tag, in which case you will have to use the above source tag anyways.
How can I get an iframe to load the whole page into the next page?
I am a N00b html coder and i was wondering
<center>
Home
<hr>
and loaded it into an iframe, and click on it, it loads inside of the iframe. I want it to load on the entire page.
If I understand you correctly, you want an iframe on a page, but when the iframe is clicked on, you want the page in the iframe to open in a new tab. This is what I did to do this:
<!DOCTYPE html>
<html>
<head>
<style>
div.iframe-link {
position: relative;
float: left;
width: 730px;
height: 330px;
margin: 0 1em 1em 0;
}
a.iframe-link {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
</style>
</head>
<body>
<div class="iframe-link">
<iframe src="http://en.wikipedia.org" width="750" height="350">
Your browser does not support iframes.
</iframe>
</div>
</body>
</html>
In this iframe, you can still use the scrollbars, but you cannot do anything in the iframe without going to that page. Change the width and the height in div.iframe-link to change the size of the hyperlink part of the iframe. My example has Wikipedia instead of Google.
:)
Also, if you do not want the iframe link to open in a new tab, just change
to
If I understand it correctly, you want to be able to click on a link inside an iframe and open it in the entire window?
In that case you will need to specify a target on your link, as such:
Home
This will make sure that the top frame (i.e. the window) follows the link.
Try this. For me it works
<iframe src="http://www.google.com"></iframe>
How can I overlay a div with semi-transparent opacity over a youtube iframe embedded video?
<iframe class="youtube-player" type="text/html" width="520" height="330" src="http://www.youtube.com/embed/NWHfY_lvKIQ" frameborder="0"></iframe>
<div id="overlay"></div>
CSS
#overlay {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:#000;
opacity:0.8;
/*background:rgba(255,255,255,0.8); or just this*/
z-index:50;
color:#fff;
}
edit (added more clarification):
HTML5 is approaching us, with more and more devices that use it instead of flash, which complicates the embedding of youtube videos, thankfully youtube provides a special embeddable iFrame with handles all of the video embedding compatibility issues, but now the previously working method of overlaying a video object with a semi-transparent div is no longer valid, I am now unable to add a <param name="wmode" value="transparent"> to the object, because it is now a iFrame, so how do I add a opaque div on top of the iframe embedded video?
Information from the Official Adobe site about this issue
The issue is when you embed a youtube link:
https://www.youtube.com/embed/kRvL6K8SEgY
in an iFrame, the default wmode is windowed which essentially gives it a z-index greater then everything else and it will overlay over anything.
Try appending this GET parameter to your URL:
wmode=opaque
like so:
https://www.youtube.com/embed/kRvL6K8SEgY?wmode=opaque
Make sure its the first parameter in the URL. Other parameters must go after
In the iframe tag:
Example:
<iframe class="youtube-player" type="text/html" width="520" height="330" src="http://www.youtube.com/embed/NWHfY_lvKIQ?wmode=opaque" frameborder="0"></iframe>
Note that the wmode=transparent fix only works if it's first so
http://www.youtube.com/embed/K3j9taoTd0E?wmode=transparent&rel=0
Not
http://www.youtube.com/embed/K3j9taoTd0E?rel=0&wmode=transparent
Hmm... what's different this time? http://jsfiddle.net/fdsaP/2/
Renders in Chrome fine. Do you need it cross-browser? It really helps being specific.
EDIT: Youtube renders the object and embed with no explicit wmode set, meaning it defaults to "window" which means it overlays everything. You need to either:
a) Host the page that contains the object/embed code yourself and add wmode="transparent" param element to object and attribute to embed if you choose to serve both elements
b) Find a way for youtube to specify those.
I spent a day messing with CSS before I found anataliocs tip. Add wmode=transparent as a parameter to the YouTube URL:
<iframe title=<your frame title goes here>
src="http://www.youtube.com/embed/K3j9taoTd0E?wmode=transparent"
scrolling="no"
frameborder="0"
width="640"
height="390"
style="border:none;">
</iframe>
This allows the iframe to inherit the z-index of its container so your opaque <div> would be in front of the iframe.
Is the opaque overlay for aesthetic purposes?
If so, you can use:
#overlay {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 50;
background: #000;
pointer-events: none;
opacity: 0.8;
color: #fff;
}
'pointer-events: none' will change the overlay behavior so that it can be physically opaque. Of course, this will only work in good browsers.