I have a fullscreen background video running in a page using an html5 video tag to play a local hosted video there is a css nav menu running across the top. I want to launch another video fullscreen over the top of the existing video when a user clicks the menu. I have no idea how to do this. The video is running responsively using fitvid.js so I don't need to scale the video in this code. Can anyone help me?
You can easily change the background with some Javascript:
<script>
function changeBackground {
document.getElementsById("nav-Id");
onclick = "import your background video here"
}
</script>
Related
I am developing a video tutorial player website, in that I require video player to display the controls and the contents of the course as per a udmey course tutorial video player. If we click the menu button a side div appears for the course description and on clicking the close button it closes the div. Please help me in this using CSS.
PS: Refer the image.
As we know, the tag video has default control that can play video with fullscreen. It's a pretty watch mode. And I want make image img can be achieved this. I find a web can do this, but I can't figure it out how to trigger the video fullpage mode when click a image in web page.
Notice: Not make browser window full screen.
Thanks for your help and click this is link. In a word, how to watch img with browser in this way as follow:
in above link, you can first choose fullscreen.
second, click the button launch image gallery.
How did the background video on the website of "http://www.exodusgodsandkings.com" autoplay on the iPad?
using javascript onload function for example
window.onload = function() {
document.getElementById('Yourid').play();
}
It is disabled on ipad and iphones by apple. see post Can you autoplay HTML5 videos on the iPad?.
As a caveat I have started using a slide show of the individual frames displayed on mobile devices as an alternative and appended the .play(); to the close button on a shadowbox of a cta on the page with the background video. This is not perfect but it is a pretty elegant solution.
I'm trying to integrate a video player or youtube or vimeo in some way to my website.
I need to include a video in the background of the site in full screen.
I would like to have more than using css3 and html controls on the video at the top left for example ..
Do you know a player that you can gesire in this way?
Tnx
How do I force a video to play over an image when clicking the image thumbnail, and simultaneously scroll back to the top where the player is?
My issue and the context: I am working on a big photographic and video project and for that I decided to (try to... :) I'm not a programmer) build and launch a customized web TV entirely within a Google Blogger blog.
Everything works fine and look beautiful but I decided to fake a customized player (that is actually just a JPEG image) at the exact same place where the player is playing.
The player is working well, but it is playing underneath the image (fake player), so you will hear the sound from player but will not see the video. I would like to know how to force my player to play over this image.
Here is the link of the web TV: http://montreal-images-tv.blogspot.com/
My second issue is that when clicking the thumbnails, the site is supposed to go back to the top to see the player area, but it doesn't work very well!... :(
How can I force the site to scroll automatically to the top when clicking the thumbnails?
PS: I have already tried code like href="#top" with an anchor and it didn't work!
Have you tried adding a z-value to the video container? (higher than the image) eg. z-value for image is 1 and z-value for video is 2.
#video {
z-value:2;
}
#image {
z-value:1;
}
As for the scrolling, I'd try use a little jquery as it has a really nice effect.
$('.clickedClass').click(
function(){
$('html, body').animate({
scrollTop: '0px'
}, 'slow');
});
Any element with the class 'clickedClass', when clicked, will scroll to the top of the page.
UPDATE: here's a jsfiddle for the scrolling: http://jsfiddle.net/CMQNT/