I have created a website, but there is one problem. My Masthead and Footer are position:fixed, and I have a video page. my Video page contains Youtube videos using iframe.
Whenever I scroll down and up, this problem sometimes occurs:
Ignore the symbols you can't understand, this is my language :P
Well, that was my best way to describe the issue.
Any idea how to fix that? I have already tried using the "Object" embed code instead of the iframe, but still, it didn't work and the issue is still hapenning.
Thanks in advance!
Related
I've read a couple of documents (google searches) in working around Picture-in-Picture (PiP). It really says it is available only for video elements. (See reference: https://w3c.github.io/picture-in-picture)
Also looked into the code of PiP extension created by chrome
You can see from the code here that it finds the "largest" video element.
My question is, how did they make it work in YouTube embedded videos? It is inside an iframe, right?
I tried this approach in order to get the video inside the iframe. It will not work because of cross origin policy and it is clear that this is not the approach they used in the extension.
Someone know what's behind all this or someone else experiencing the same?
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.
Is there any way to create a frame that loads a website other than using iFrame?
Picture this: Me, having a website and wanting to frame a blog into it, although when I use iframe the website displays correctly (for most of the part) but the links within the iframe website don't work.
I've seen many fixes although none have worked for me thus far, I'd greatly appreciate as much help as I may gain. Thank you to anyone who answers correctly!
There's a frame HTML tag, but is deprecated under HTML5 and works almost the same as iframe. The only difference is that a frame divides the entire window and an iframe is an inline frame.
So, no, the only way is using iframes. You have to correct your blog to work with iframes (If you want).
If you don't own the iframed blog, then using iframes is not a good way to work because, for example, you don't know if they are going to add iframe breaker codes in the future, so the best way is to add a link to open in a new window/tab.
I am experiencing a weird issue with {VideoEmbed-_} tags. The tumblr theme documentation (I would link it, but I don't have enough rep to post more than 2 links) defines {VideoEmbed-700} as
Same as {Video-700}, but removes the lightbox effect from directly uploaded video. 700-pixels wide.
However, when I use {VideoEmbed-700}, all videos that uploaded to 3rd party video sites (instead of directly uploaded to Tumblr) do not display at all.
Here is an example using a Dailymotion video, and here is an example using a video uploaded to Tumblr. As you can see, the tumblr-uploaded video works fine, and the dailymotion video is not generated.
I tried using a few sizes ({VideoEmbed-700}, {VideoEmbed-500}, etc) and they all produce the same results.
I'd prefer to not have the lightbox, and also I made the videos fluid width and the lightbox breaks that when you open and close it. So, I'm pretty determined on making {VideoEmbed-_} work.
Has anyone else experienced this? Any comments or suggestions are welcome. Thanks!
The only solution that I've found so far is to include both of them on the page:
{VideoEmbed-400}
{Video-400}
...and then hide the lightboxed version with
.type-video .has_lightbox, .type-video .tumblr_video_container {
/* Remove Tumblr video that has a lightbox enabled */
display: none!important;
visibility: hidden!important;
}
Note that in this case the Video post type has a class of .type-video on it.
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?