Have a total nightmare getting a div to sit above a YouTube video embed in Firefox (28) for Windows. Works a treat everywhere else and general guidance online seems to be to pass wmode=transparent in the URL but I'm having no joy..., the URL in question:
http://www.ihasco.co.uk/training-programme/coshh
As you can see there's a 'sticker' which should sit above the video at the top right.
:Have you tried position: relative/absolute on both the video and badge? I seem to vaguely recall that was a fix for a bug I once had with a dropdown menu over Youtude videos.
Related
If you go here (link: https://yle.fi/uutiset/3-11555155) and scroll down this news article, you will see there is a rather long background video that plays as you scroll showcasing some nodes and boxes. However the initial page load is very fast and I don't see it loading a video from anywhere at all.
As I try to understand how this website is put together, I'm not able to see where the video comes from, nor do I know if it's an .mp4 or some other format. When I try to hunt it down in my network tab and monitor if it loads, I just cannot see it and there is no resource that seems to be more than a couple of hundred kilobytes.
How is this possible from a web-design standpoint? Is it some sort of a proprietary solution that stealthily streams the video as it is loaded? If I would like to build a background video that plays on scroll like this in such a performant manner, how could I do it?
Such videos that play on scroll can often be seen for example on the apple.com website, but at least there I can easily also see the original source videos and materials of how the page is put together. Here this is not the case.
I would greatly appreciate if you could answer this super basic question I have. Thank you!
I've been looking for a solution to these problems. Basically, I had never used bootstrap before (or CSS), and have bought a template online: http://wrapbootstrap.com/preview/WB0NFRM26
I've managed to turn that into this: www.votgaus.com
That's my website. I think I've done a pretty decent job knowing it's my first experience with CSS. So far, I've been able to find solutions online to everything but these two things:
1) My footer, when opened on my iPhone, expands and fills the whole screen but not the whole text is shown. It's kind of weird to explain. If you can actually open it on your iphone you'll see what I mean. The last line gets cut off at the end. And the only way you can actually close the footer and see the logo at the top is if you scroll down (which is fine). But you can't scroll to show the last line. Why?? This is some of the code. I really have no idea what i'm doing. I put the max-height inside footer, but don't understand then why do I have the .collapse-footer for. I'm really confused as to how this footer was made (I pulled it from bootsnipp).
footer {
background:#764554;
position:fixed;
bottom: 0;
left: 0;
right: 0;
max-height: 100vh;
}
footer .panel {
box-shadow: none;
}
.collapse-footer {
padding-bottom:0px
z-index: 1;
max-height: 100vh;
}
.collapse-footer p {
font-size:14px;
line-height:normal;
}
I think this stems from the fact that I don't really understand where to put the max-height attribute, maybe.
2) My videos take forever to load. Not videos in general, but the videos in the header of the sections. Each section has a banner and the background is either a video or a picture. I've made them quite light, up to a megabyte maximum and most only are 500 KB. At the beginning, I started putting my videos (not the ones from the template) on mp4 and each like 10MB. I thought that was the problem. The template actually has each video in three different versions (mp4, webm and ogg). I thought I could choose. So later I made them webm and reduced the size. It still is so slow. So I decided to get rid of the loader at the beginning since it was giving me so many problems, especially on phones. Nothing. I then changed the name of the folder to webm, and changed the html as well to pick it up. In theory, I should put a still frame on jpeg with the same name, so that on phones it just pulls the picture instead of the video. This is messing everything. Sometimes it loads the videos, sometimes pictures (both on phone and computer), sometimes it mixes the images, even from separate folders. And sometimes refreshing it makes it work much better, but it still takes SOO long compared to how fast the template is. Don't understand why. I've tried making a version of the html where it doesn't pull video and just goes for the still (by forcing the src to the .jpeg), but still, it will pull video sometimes, and load really slow.
I don't know which part of the code is relevant to this. My whole css stylesheet is here:
www.votgaus.com/css/main.css
HTML is just www.votgaus.com . Bootstrap is www.votgaus.com/css/bootstrap.min.css . SASS which I don't even know how it works is www.votgaus.com/sass/main.sass
Thank you to anyone who could give me a tip or help me fix this, even if it's just telling me what to look for. Especially with the loading so slow.
Cheers!
Do you have your own streaming server? If none maybe try hosting your video in some cloud hosting server, explains here - https://aws.amazon.com/blogs/aws/using-amazon-cloudfront-for-video-streaming/
I am using a video background plugin on this site http://kimcolemanprojects.com/index.html
Its works great on all browsers, only on chrome the video doesn't show until the user clicks on the screen, which is just a white screen.
Looks like its bound to a click event but I can not work out where. I can see no events bound to this page.
Thanks for your help.
Angela
This is a strange one indeed. It only happens for me when I open your site in a background tab. There are definitely no click handlers. (See "Event Listener Breakpoints" in dev tools.) And the video element does exist and is loaded, even though it's not displaying. So I suspect it's either a bug in Chrome or a quirk in how it handles certain slow-loading pages.
One thing that seems to make it show up is to tweak the CSS in the developer tools. So try adding this to your page at the end of the body element:
<script>
$(document).ready(function() {
setTimeout(function() {
document.getElementsByTagName('video')[0].style.display = '';
}, 500);
});
</script>
That works for me when I run it in the console, so hopefully it will work in script.
Also, there are a few easy things you can do to make the page load much faster and mitigate this particular problem, even if you can't make it go away completely.
Set a dark background color. That way, when the video takes some time to load, people will be able to see the white text immediately.
Make the video MUCH smaller. It's about 21MB, which is way too big for a background. It's encoded at around 3400kb per second, which is more than you need even for HD video on the web. Try it at 1000kb or even less. Maybe 500kb. And don't include an audio track in the video file.
Save the poster image as a jpg instead of png. It's 140kb. You can get it much smaller.
Put all your scripts (except for the mobile redirect) at the bottom of the body tag. This way you can at least get the text and background color displaying without having to load your scripts.
This is my first question, so your patience is much appreciated. I am having a weird issue with safari/chrome mac users only. This works superbly in IE7, IE8, Chrome, FF and safari(windows). Trying to determine and isolate the issue related to safari/chrome browsers since they start playing the embeded video inside hidden div immediately on page-load.
My company redesigned their homepage and I built it on our site recently. I am fairly new and this was my first solo webpage with JQuery slider, HTML5 etc. (I am unable to provide the link here).
Description of the page:
I have a slider in place which is using the auto-advance.js file to
automate the rotation of images every 7 seconds.
One of the images belonging to this image list slider has a "play video"
button. Below is the image map area which calls a javascript
function on "play video" href click that "hides the image" and "displays the video div"
Javascript function:
`function doStuff() {
$('div#vid').css('display','inline');
$('img.hid').css('display','none');
}
`
Here is the hidden div with HTML5 iframe youtube embed code:
`<div style="display:none;" id="vid">
<iframe class="youtube-player" type="text/html" width="770" height="430" src="http://www.youtube.com/embed/cPoENdJx5DQ? wmode=transparent&feature=player_embedded&autoplay=1&rel=0" frameborder="0" allowfullscreen="false">
</iframe>
</div>
`
Everything works beautifully in windows but for mac users the video starts playing in the background (since the div is still hidden they hear music from the video). To fix the issue immediately I had to swtich off the autoplay option (here I edited it back to 1) on the site which has solved the issue temporarily.
I am trying to understand why chrome/safari mac browsers are autoplaying the video on pageload itself and not on href "play video" button click.
I have carried out detailed research and could only find this article on the issue : http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_27722407.html, which makes me think that maybe this could be because of some code clash possibly? And if it is then why the browsers in windows are working perfectly?
Any help is much appreciated!
I would suggest:
function vidrun(){
var span = document.createElement("span");
span.innerHTML = 'code here for video';
document.getElementById("the surrounding element's id").appendChild(span);
)
This will only add the video when you get to the time you want the video to automatically start playing instead of actually already loading the video and starting it.
All you will have to do to start the video playing when you get to that point is to call the vidrun() and done :]
I've got a web page with two different floating divs (position: absolute) and both contains a flash movie. The two are overlapping and the one below is a lot bigger.
The problem is: on the LAST VERSION of FIREFOX for MACINTOSH (snow leopard) the flash movie on top is impossible to interact with!
Watch yourself (wait for the fullscreen video to close): http://clients.adrime.com/files/campaigns/3509758016/27221/IT_pourfemme.it_index.html
How can I fix this?
Thank you in advance
I know this is an old questions but I thought I'd throw a possible solution that I've come across.
I had a very similar issue as described above. Two SWF movies loaded into a page sitting on top of one another. The top most contents mouse position was always off by a decent margin making the buttons almost unusable.
One of my movies was 1000x650 the other 1200x650. The larger of the two had a left positioning equivalent to around -100px which appeared to be the same offset being seen in the top most movie.
By giving both movies the same left positioning, the issue was resolved. Most annoyingly this only occurred on Firefox on Mac / OSX.
Some other discussions around this subject can be found in the comments here:
http://snook.ca/archives/other/hit_bug_in_fire
It appears to be a consistent bug, I'm surprised it hasn't been addressed.