There's a page on my website where I have embedded a livestream from twitch.tv and I am experiencing some issues with the livestream overlapping content that it shouldn't. If the user tries to login or register while on that page, then the embedded video will place itself on top on the modal/dialog that opens. The modal is created with Bootstrap 3.
It looks like this:
The iframe embed looks like this:
iframe src="https://www-cdn.jtvnw.net/swflibs/TwitchPlayer.swf?channel=imaqtpie" frameborder="0"
Anyone know a solution to this?
You're going to probably look at the CSS z-index attribute.
You can manually set them in the order you want, however beware of any overiding css coming from the the boostrap class modal.
Although I think it is just the video that needs a lower z-index, as modals are usually given higher values.
e.g.
<iframe style='z-index:0' ...
More on this SO post: how to control div overlapping in html
Fun tutorial if you have the time: http://webdesign.tutsplus.com/articles/what-you-may-not-know-about-the-z-index-property--webdesign-16892
Related
I want to embed a page from around 200px down. Is it possible to make an embedded page (for example, an embedded Youtube page scrolled down to the comments)? This code worked for the embed itself - <iframe src="(webpage)" width="800" height="452" frameborder="0">. I'm assuming it's HTML. Please let me know if it is poorly phrased for the section.
I created an iframe to embed an external website, the problem is that, for example, if the user clicks on the Twitter button of the embed website, this action will take the user out of my page, loading Twitter's page, I want to avoid that, I want to load that content on the same iframe, how can I do that? I tried naming the iframe, the parent target, but that didn't work.
Here an example of my code:
<iframe src="http://superluchas.com/" width="100%" height="1000" frameborder="0" scrolling="no"></iframe>
If the third party page targets a specific frame (including _top and _blank) then there is nothing you can do to override that.
Security restrictions prevent you getting access to the DOM.
The twitter button probably has '_blank' as target in <a> tag. You will need to change it to '_self'. More info on target attribute can be found - W3Schools
Also here is an example in which if you click the links inside of IFrame target you will see the page loads into the frame itself, not outside. JSFiddle
I have a webapp written in HTML5.
The Home page contains a <video> tag.
The video is correctly played when I load the page for the first time, and if I use controls (pause, play, fullscreen) too.
In order to maintain the webapp always in the fullscreen view, I used only one html page, and when a button (or an anchor) is clicked, I hide the container div (representing the content of the logical "home page"), and show the selected one, when the "home" button is played I show again the original container div.
Originally, the video continued playing when I clicked a button to pass to another virtual page, so I pause it by jquery.
The problem is: only on iPad, when I come back to the first container (that means the home page), the video is no more available, I can't see the poster and the video itself, and the div is black screen.
Some notes I hope could restrict the problem:
The video is statically loaded in a <video> tag and source
attribute.
I've tried to start with an empty src and load it by
jQuery (as explained in many tutorials and in stackoverflow too), it's the same.
The same if I try to create a playlist in
which I select different videos and load the selected one in the
<video> tag using Javascript.
I also tried to reload the page with jQuery, but doesn't work.
The constant beahviours are the following:
Every technique I tried to implement is working well on PC with
Firefox and on the Mac with Safari.
The problem on the iPad appears only when I try to come back to the initial page.
I'm not convinced the problem depends on the technique of show/hide I used, but on the iPad behaviour. I've read some other ways to maintain the webapp in fullscreen view, but apply only to <a> tags (such as this:), I need div stylized as buttons (and managed in jQuery) too.
Thanks if someone can help
I think if you use flowplayer is better it is good implementaton that it work on IPhone and Andriod, it is free.
Okay, so I'm trying to iFrame a webpage. I don't know why, but it won't stay in my page (it pops out and goes to the main page). The code I'm using is:
<iframe>http://mywebsite.com</iframe>
How do I keep it in my site?
Try this:
<iframe src="http://mywebsite.com"></iframe>
You need to use the src property.
<iframe src="http://mywebsite.com"></iframe>
HTML/text content placed inside the tags of an iframe is treated as "fallback" content that only shows up if the browser doesn't support iframes. See the MDN documentation for full details.
<iframe src="http://mywebsite.com">
This sentence only shows up if the browser doesn't support iframes!
</iframe>
Thus, you were creating an iframe that didn't point to any page with its src property (so it remained blank), and had the text "http://mywebsite.com" as fallback text to appear in browsers that don't support iframes.
EDIT:
If you don't control the site, it's possible that the framed site has some logic that says something like:
// if we are not the highest frame, someone is try to frame this site
if(window.parent != window)
// redirect the framing parent site to our site
window.parent.location.href = 'http://iframedsite.com';
This logic detects if the site is being embedded by someone else (e.g., your own site) and redirects the parent frame. You can confirm whether this is the problem by simply framing IANA's website, https://www.iana.org/ (or just http://www.example.com), which plays nicely when it is framed and doesn't do parent-frame redirects.
I have a website that has a huge background image. I need to put a flash player at the top of the website, and I just realized that each page they click on is a new page, and thus restarts the Flash player. So I would like to put that flash player in an iframe so it will continue to play throughout the user surfing.
But my issue is will the iframe cover the background image and not be underneath? Or will the background image of the page (not iframe) go nicely underneath the iframe and no one will be the wiser of my methods? Any help would be greatly appreciated.
Firstly what you want to do is put your individual pages contents into an iframe (not the flash video) as this is what you want to update. You want the flash to be on the actual parent page so it always remains the same. (or put both in seperate iframes and only update the content iframe).
In regards to your question about the iframes background you can make it transparent so that the background is still visible through it.
To do this set the ALLOWTRANSPARENCY property to true on your iframe e.g.
<iframe width="100%" height="500px" name="content" src="home.html" frameborder=0 allowtransparency="true"></iframe>
And then in the pages which are going to be contained in the iframe set the body's background to be transparent:
<body style="background-color:transparent">
Iframes are bad, and take with them all the shitty stuff about frames (google "why frames are bad" if you want some reading).
What you should be looking at is some AJAX-techniques. JavaScript frameworks like Dojo and jQuery have lots of functionality you could check out. This will enable users to do things like vote, add to favourites or comment while the movie is playing - pretty much like Youtube.
It all depends a little on what you've got running underneath your HTML-pages though. Could you provide some more information about that?