I came across this site: https://hinge.co/ and tried to follow the HTML/CSS to find out how they have the fluid, responsive HTML5 video background.
I came across several properties which I don't understand, for example:
max-width: calc(177.778vh);
height: calc(56.25vw);
I understand this is a JS plugin they're using, and the values in calc are dynamic. But why would the vh height be more than 100? Wouldn't that be bigger than the viewport itself? The video seems to be the exact viewport size so I don't understand the logic here.
Has someone created something like this before and can help understand how this is done?
I've checked the code and those two particular lines are not doing much more than constraining how zoomed in the video should be.
What does the trick is
min-height: 100vh;
min-width: 177.77vh;
which guarantees the video will cover the entire screen and more, regardless of the videos size/shape (vertical or horizontal).
I came across this site: https://hinge.co/ and tried to follow the HTML/CSS to find out how they have the fluid, responsive HTML5 video background.
They didn't use the HTML5 video element. They embedded the video from Vimeo then positioned it with the CSS.
I understand this is a JS plugin they're using, and the values in calc
are dynamic. But why would the vh height be more than 100?
They probably did it to keep the aspect ratio of the video correct in any screen size.
Wouldn't
that be bigger than the viewport itself? The video seems to be the
exact viewport size so I don't understand the logic here.
It overflows the wrapper. Which has overflow as hidden.
Similar Example: https://startbootstrap.com/snippets/video-header/ (Not exactly same but HTML5 Video Element used here for video background)
HTML Video element on MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video
Related
I'm trying to create a website that depending on which div is in view will play a different audio file.
The only thing closely related that I could find was different audio playing depending on specific height locations of the website, i.e. between start height = 1000px and end height = 1400px play X music. Example here: http://home.jejaju.com/play/smoothFade/tracks
The only issue with this approach is that my website is responsive, so depending if you're on mobile or desktop will have different heights.
Any ideas or examples on how to approach this?
Have you looked into using the intersectionObserver? You can choose to play the audio based on the ratio of the div being within the viewport.
I see a number of ways to deal with layouts, and interchange, etc to deal with image sizes, but I haven't come across any info about video player size. For instance, using viewbix, voo, jw, or any other js served video player, the size of the player is built into the embed. It also has an associated image file for the poster frame.
Just wondering how other folks approach this. Do you make multiple versions of the embed and image for various breakpoint sizes? Does it matter if the embed is too big? Not sure if that actually affects streaming speed or not, or if the video itself is technically doing anything until play is pressed. Image would still be an issue though as serving a full width desktop size image on a 320px screen seems a waste.
What's the smart way to handle this globally?
thx
With the JW Player, we have responsive support built into the player - http://www.jwplayer.com/blog/new-in-jw-player-responsive-design/, so you don't need to worry about breakpoints, media queries, or anything like that. Those would all still be handled in your CSS.
jwplayer("myResponsiveVideo").setup({
file: "/assets/tearsofsteel.mp4",
image: "/assets/tearsofsteel.jpg",
width: "100%",
aspectratio: "12:5"
});
Basically a set up like this will make the player responsive, regardless of what container it is in.
I'm looking for an responsive image slider for a particular case.
This is what I would look to happen on desktop/tablet/mobile.
You can also swipe through the images on tablet/mobile.
It's important that the images don't need to have the same width. (height is always the same)
Does someone knows a js library for this?
I searched but most of the time you only have view of 1 image.
How's this?
http://jquery.lemmonjuice.com/plugins/slider-variable-widths.php
It supports IE6+ and is very lightweight. You can easily make it responsive by wrapping it in a div with overflow: hidden; that varies in width as you require. Alternatively, you could have a go at rewriting it as you require (it's quite a lightweight script!)
The lemmon slider works great with Touch Swipe. The instructions to add this are here:
https://github.com/lemmon/Lemmon-Slider/issues/5#issuecomment-25177163
Ok so I need to have a video load full screen as an intro to a website. Can I do this in HTML5 or do I need to use flash?
Can someone please explain or point me to some good resources on how to do this.
I need to website to load and the 5 second clip to play through with no player controls or anything and then go straight through to the main site.
Exactly like this example: http://www.firecrackerfilms.com/
Thanks :)
If you need to set a background video try this
Use position:fixed on the video, set it to 100% width/height, and add a negative z-index on it so it appears behind everything.
If you look at VideoJS, the controls are just html elements.
HTML
<video id="background" src="video.mp4" autoplay>
CSS
#video_background {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: -1000;
}
The page in your example isn't full-screen, nor is it even full-viewport, it's a small video with a black background that blends into the page's black background. If you can get away with doing that, that will work.
If you care, you will never be able to auto-play an HTML5 video intro on iPad, because iOS inhibits autoload and autoplay unless they are triggered by a finger touching the screen. But then again, it can't play Flash anyway.
If you want an HTML5 video to be full-viewport, for, say, a 16:9 video viewed in a 4:3 monitor, you will make the video full-height and lose the sides of the video. Similarly for the reverse case. This will maintain the video's aspect ratio with the caveat that you lose part of the video content to hidden overflow.
If you don't care about aspect ratio, you can make the video height: 100% and width: 100%, as #coder suggests.
For this reason, it's probably easier to go with what they did on your example site, and make the video blend into the background.
Here is a nice thread about html5 vs flash video and the pros and cons:
HTML 5 <video> tag vs Flash video. What are the pros and cons?
Personally I would prefer html5 because you can watch videos on almost every device type like iphone or ipad and so on).
But html5 is not as powerful as flash videos.
You should also consider that some users have disabled javascript or flash configuration in their browser.
I don't think real fullscreen is possible with a user requesting it. At least in flash it's not possible.
If you mean to fill the whole viewport then it can be done by using css to size the video element with the caveat that if you set width and height to something that doesn't match the aspect ratio of the video, the video is not stretched to fill the box. Instead, the video retains the correct aspect ratio and is letterboxed inside the video element. The video will be rendered as large as possible inside the video element while retaining the aspect ratio.
I am using Quick time via javascript so that I can play video on my web browser. I want to resize the video so that it fits the size of the DIV. The problem is that when the player launches the video the size of the DIV remains the same but the player gets out of the DIV. I want the size of the DIV remain the same doesnt matter if the player can not be fully shown or resized.
How are you setting the size of the player? If you set the <object> width and height attributes to a certain number of pixels it should respect that. Whilst you can set width: 100%; with CSS, if that makes it resize with a liquid layout many plugins won't resize themselves after loading.
Unless you absolutely must play back old-school .mov files, I would strongly recommend avoiding the embedded video players today, and especially QuickTime which many Windows users will not have. Video on the web today is primarily done with Flash players. HTML5 <video> with fallback to Flash is nice to have for the newer browsers.