![]() ![]() ![]() ![]() Andersen has a nice clean example of this with the CSS, so I ended up with this markup. As they say: padding-bottom: 56.25% To create a 16:9 ratio, we must divide 9 by 16 (0.5625 or 56.25%).Īnders M. The hardish part about resizing a video is maintaining the ratio, like 16:9 for example. While I could then use the FitVid JavaScript to make the video resizable, it seemed like overkill to use some JavaScript to resize something that CSS should be handling for me.Įnter A List Apart and their article on Intrinsic Ratios for Video. That meant that I could serve my trailer video from YouTube. Originally Rob was using a Flash player called Flowplayer but I recommended that he save money by serving his video trailers on YouTube. These are all great but if you've already got your video up on YouTube, Vimeo, Blip or another video sharing site, you might just want to make that existing video embed resizable.įor that, you can use FitVid, a small jQuery plugin that will take effectively any video element and make it resizable and usable in a responsive design. jMediaelement or " jme" - Clean, basic, simple, open.SublimeVideo - Free and pretty but they have a few sign up things if you serve hundreds of thousands of views.VideoJS - A really nice and image-free HTML5 video player with a series of templates that can make it look like Vimeo or YouTube or others.There's a number of ways to embed a video that will use Silverlight or Flash if HTML5 video isn't available, including I picked Skeleton, then with a little magic help from Jzy and a late night Skype (go visit his site, by the way!) we brought in a few elements from my currently blog template so the general look and feel is still there. There's others, and the nice thing is that you can get started with a template like this in minutes, not hours, so go find one that makes you happy. Initializr - Takes a mobile-first approach, although ironically their own site doesn't use their template.Skeleton - Uses a 960-style grid but scales down to a phone.There are a number of options out there, including two of my favorites: There's even group knowledge and experience that there's little reason for me to New Blank HTML File these days. A site that resizes cleanly, rotates cleanly and the video thumbnail is always as large as possible.įirst step, a decent starter template that works on Mobileįor stuff like this, I now always started with a decent boilerplate.A site that includes the free trailer for my video that plays on any device, including phones and tablets.Site should look good on mobiles and tablets so I want to use responsive design.A site that looks kind of like my existing site, to keep the branding cohesive.The idea was to spend only an hour on this from the moment I got the domain to a "complete" site. I went and bought and fired up WebMatrix to do a quick one-pager. I wanted to put up a site for this video to give people more details and to make it easier for me to get the word about about the video separate from Tekpub. I recently did a video with Rob Conery on how to be a better technical speaker and blogged about it. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |