I'm trying to create a full browser width video similar to this example:
http://www.zendesk.com
Creating the full width responsive video is simple enough:
http://www.ttmt.org.uk/video/
My problem is the height of the video when the broswer is full width. The video is too tall and fills the whole of the screen.
It would be better if the video was a different ratio but I don't think that wouldn't work.
Is it possible to place the video in a container and give that a height that will mask part of the height of the video. I don't mind cutting some of the vidoe off.
zendesk is using a CSS Flex Box Layout. More at: http://www.smashingmagazine.com/2011/09/19/css3-flexible-box-layout-explained/
I bet your answer lies there. From what I saw in the source I'd guess zendesk is hosting video in a container that is framed between two flex boxes. Cool stuff.
Yes, this is possible.
Check out the Vide jQuery plugin. From my personal experience, its the easiest to play with with minimal fuss.
Because the plugin is responsive, it will constrain the video to the height/width properties of your container or wrapper.
Your best using height:auto; width:xxPX; with your container/wrapper CSS.
http://vodkabears.github.io/vide/
Related
quick question:
I'm using a couple videos, and I want them to be 100% of the screen at every viewport, without stretching the video. I put width & height on 100%, and I understand that that won't work, because video's have fixed resolutions. But how can I make the video full screen on desktop/tablet/mobile? I searched for a video alternative to the picture tag with source tag: srcset, sizes etc; but that doesn't support video tags.
Any ideas?
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 have a number of image with a width of 100%. In every other browser this means that the image scales to fit its container, but in ie8 the images stretch vertically. Any ideas why? What can I do to prevent it.
You might be able to control images across multiple browsers more easily using a tool from imageresizing.net. Follow their installation instructions using NuGet, and then when referencing the image in your HTML use link parameters:
<a href="file.jpg?w=100&height=100&mode=max">
Check their basic commands documentation for other parameter options. I've used this tool for responsive web design and it scales fine using width, height, and mode parameters. see an example I implemented here.
For some images I prefer to use scaling the image according to page size to make it responsive.
<img class="img_scale" src="img.png" alt"this img doesn't have width and height
definition">
css:
.img_scale{width:100%; height:100%; margin:0 auto; height:auto !important;}
This solution works perfectly if the image is not a billboard background image or in a not flexible box.. So I would like to scale image in stead of using a jQuery plug-in.
However, It is often said that scaling images causes repainting and alot of performance issues.
What do you do? Is there a solution to overcome performance issues with scaling images?
I guess it depends on what "performance issues" you are really trying to solve. If you are worried about time spent re-sizing in the browser or re-flow issues, then use max-width: 100% on the image and set the image container's width preferably using a responsive framework such as Foundations Framework or Bootstrap.
If you are worried about the time it takes to download images to a mobile device over a slow mobile network, then your image needs to be scaled or cropped before they hit the wire. Doing this on the client browser is too late. You can either do this on the fly or replace your img.src to one of several sized images based on breakpoints.
To scale or crop responsive images on the fly you could use a service such as Pixtulate. They provide a JavaScript which will automatically detect your container's size, send those dimensions to the server and re-size the image server side in real time before the page finishes loading.
Check out this article from Smashing Magazine. The author goes into great detail about anything you may want to consider, and possible solutions.
I'm trying to build a very simple proof-of-concept for the guys I work for to demonstrate something for them. As of right now, I've got everything working, except that in my (obviously extremely crude) website, I'm trying to embed a video and FORCE the video to completely fill a certain size. The main problem that I'm facing is that if I try to embed a video with:
<video width="1920" height="1080">
then it increases the size of the video screen (though not to those actual dimensions - it stops at a much smaller size), but keeps the actual viewable video size at the original dimensions and just adds a lot of black space into the video player.
Clearly, this isn't the right way to do this. I know HTML is usually regarded as pretty easy, but this is literally the first webpage I've had to do, haha. Any help is greatly appreciated!
I found this # http://www.w3schools.com/html5/att_video_height.asp
Note: Do not rescale video with the height and width attributes! Downsizing a large video with the height and width attributes forces a user to download the original video (even if it looks small on the page). The correct way to rescale a video is with a program, before using it on a page.
So guess you can't scale up a video with width and height tags. Just define it's dimensions so the browser can reserve space for it while loading a webpage.