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.
Related
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'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/
I'm using Thickbox to display videos on a website and the youtube video seems to be too large for the thickbox frame. I've tried decreasing the youtube video size but the thick box seems to follow the size of the video because no matter what I adjust the size to I always have this:
http://imgur.com/KJ2kJYr
Notice in the bottom right corner, the video goes outside the frame. Any suggestions are welcome.
Here is the html code for the video. Personal info has been removed (site name, youtube embed, etc.):
<a class="thickbox" href="//www.youtube.com/embed/XXXXXXXXX?rel=0&showinfo=0&controls=0&KeepThis=true&TB_iframe=true&height=400&width=600" title="XXXXXXXXX"><img src="http://www.XXXXXXXXXXX.org/campaign/wp-content/uploads/sites/59/2013/11/XXXXXXXXXX.png"/></a>
I would need the full code to give a complete answer, but based on my experience with other plugins:
Most plugins have very specific styles that are sometimes difficult to override. Give the video a "class" and set the width to width: 100% !important; (or whatever). This should override the defaults set in place by the plugin.
In my html page, I include an image as
<img src="http://i44.tinypic.com/w2o9kh.png" border="0" alt="Image by TinyPic">
I style it from an external css by
img {width:2em;height:2em; }
However I notice that the image quality deteriorates when same image is used more than once in a page.
Compare http://jsfiddle.net/aJ333/50/ and http://jsfiddle.net/zxgQr/ in firefox. The quality of smiley is worse in the first one.
Any insight on why this happens and how to retain the quality ?
P.S. Ive checked this happens even if images are in different div containers.
P.S. This seems to be browser specific:
In chrome both are good quality
In IE9 both are bad quality
In firefox quality of smiley is worse in the first fiddle.
I would like this to work in firefox at least.
Im novice in html so please bear with in case this is obvious
You are setting a height and a width value on your images. If those values are bigger or smaller than the actual dimensions of the picture, the browser must scale it. This process changes the resolution of the picture making it look somewhat blurry.
So this is weird. I was experimenting with html5 video tag. Your snapshot photo of the trailer is defined by video poster="megafon2.png" width="640" height="360"
Why is the second video smaller than the first? I thought the video will be the dimensions of the poster image you define. If I remove the width and height, you will see the second video go bigger. Maybe is it because of the video format? Is it more like a square?
http://www.2kfilms.com/services_megafon.html
The two videos are both bigger than the space allocated for the <video> element (1280x720 and 720x576 respectively) so the browser will attempt to scale them to fit.
For the math to fit it means that the second video ends up being adjusted more.
If you align the size of the media element closer to the source video(s) so the aspect ratio can be maintained while scaling you should see a more consistent result