Is it possible to define fullscreen HTML5 video attribute? Let's say, I only want to make the fullscreen shows 30% of the video.
What I want to achieve is to open 3 browser tab, the first tab shows 33% of the video, second tab 33% and the third tab shows 33% of the video. BUT, this three tab must be full screen.
Any alternative or method is highly appreciated.
You could put all three video element inside a div and then fullscreen the div.
Related
I have a problem with a website I'm working on. Using the Safari browser, while the page is loading, the video control appear just for a second (like on the image) and then it disappears.
The main page of the website has a full-screen video but I set the controls=false in the attributes. And the main problem is that it always appears, also when there is no video in the page is loading. How can I hide it?
controls is a Boolean attribute so its very presence means that it is true, regardless of what you set it to.
Try ommitting it entirely.
I am making an html webpage with a video in the background and would like to accomplish the following using CSS:
The video keeps its aspect ratio
The video fills the width of the screen
At relatively large window size the whole video is visible
The video has a minimum height (i.e. when the window is shrunk, at a certain size, the whole video is no longer visible).
There are elements positioned directly below the video, dynamically following it if the window is resized
It would also be nice if when the video is invisible it is centered (not crucial).
I've been trying this for ages now and have been able to get most of the points but not all of them; in particular I find the last point (positioning another element directly below) to be hard to combine with the others. I've been using the html video element and CSS.
Is this possible?
You can use a Jquery plugin for this. I recommend looking at this one in particular.
Vide - Jquery Plugin For Fullscreen Background Videos
I embedded a youtube video to a page using bootstrap's embed-responsive. When I resize the browser to fill the left half of my screen the video resizes correctly but when I resize the browser to fill the right-half of my screen or the top half the video doesn't resize and overlaps other content... Any idea how to fix this/why this is happening?
My code:
I am trying to use bootstrap's responsive-embed to embed a youtube video but for some reason it doesn't show on the page at all. I know it's on the page as I am using a screenreader which reads it and I can play it and hear the sound but visually it doesn't show at all.
Any idea what i'm doing wrong?
my code:
screenshots of the resized page:
https://www.sendspace.com/filegroup/8N0y4wQ5CwHATxM25UavWLvhrs7%2By5Wv
turn out I just had to remove the embed-responsive-item and the col-md-4 from the iframe
Does anyone know how to restrict the HTML5 Video fullsize limit to the portion of the screen instead of the complete screen.
Example: My screen size is 1920 * 1080 where my whole page will be displayed and on top of the page I've a modal dialog with 920 * 800 where I will display the list of videos, when I click on fullscreen of any video it is occupying my whole screen size 1920 * 1080, instead of it I want it to occupy only 920 * 800, which is my modal dialog size. Any thoughts. Any help would be highly appreciated.
You can fullscreen an outer element that contains the tag, instead of making the itself full screen, by using requestFullscreen on the outer element from JavaScript:
https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode
Unfortunately, if you enable controls on the video element, it will still have its own fullscreen button too. There might be ways to hide it; here's another question about that topic:
How to hide full screen button of the video tag in HTML5
but it doesn't seem to be possible in all browsers. The best thing is probably to hide all of the video's controls, and implement your own controls (there's open source out there that does this kind of thing, like video.js).
Just wondering if anyone knows any tricks to getting regular html content (mainly an img tag) to display on top of a video (via the video tag)?
As others have intimated it's very easy to position HTML elements on top of VIDEO elements using absolute positioning. The challenge comes when you try to capture events on them in the iPhone, iPod and possibly older Android phones that don't play video assets inline on the page (as opposed to in a thin native playback client) since in those instances the VIDEO element greedily captures events.
If you use an IMAGE element or a DIV with its background-image set to an image you want to use as a "poster" or "thumbnail" then your users won't be able to tap on them to get the video to start playing -- the mobile browser will treat this behavior as if nothing but the VIDEO element exists in that space (good if you happen to click in the middle where the "big play" button is but not so helpful if you, say, have a custom control not in the middle.
The solution I've used in the past is to just put the IMG or DIV poster on the page where you would normally put the VIDEO element and shift the VIDEO element offscreen (absolutely positioned with left style set to, say, -3000px) so it can no longer hoard those events.
I know this isn't exactly what was asked, but hopefully this information will prove useful to someone.
You can simply put html elements on top of HTML5 video by positioning them absolutly on top of the video. Give both the video element and the HTML element a "position:absolute" and put the HTML element a z-index higher than the video element's.
Why not use the poster attribute? That way you can display an image until the video is loaded or play.
Can you set the video as background for that div? Not sure if it would work for your layout, but it seems logical...