Sưu tầm

Did you ever want to resize a video  on the fly , scaling it as you would an image? Using intrinsic ratios for video, you can. This technique allows browsers to determine video dimensions based on the width of their containing block. 24 comments Share this on Get a great domain name for your great idea at  Hover.com Ad via The Deck JOB BOARD Spiffy is looking for a Go Developer. Job listings via  We Work Remotely With intrinsic dimensions, a new width triggers a new height calculation, allowing videos to resize and giving them the ability to scale the same way images do. See example one . The concept The idea is to create a box with the proper ratio (4:3, 16:9, etc.), then make the video inside that box stretch to fit the dimensions of the box. It’s that simple. The trick The  padding  property is the magic that styles a box with an  intrinsic ratio . This is because we’ll set padding in a  percentage , based on the  width  of the containing block. T

To scale a YouTube video to fit any browser or tablet/mobile device for responsive design you can use either a CSS or Javascript solution to accomplish the goal. This example uses a CSS solution, you need to add a couple of CSS styles in your main CSS file. The Process The first thing that you need is the YouTube iframe embed code, grab that in your video share options from the YouTube site. Place the iframe code on your page, in this example above the iframe's container div (div.youtubevideowrap)  has 2 CSS declarations for width, it has a  width:80%  and a  max-width:640px . This makes the content fluid as a percentage unit is used, it also has a max-width set as I don't want the video displaying wider than 640px From here we need to add in a HTML container around the video and declare the CSS. Setting Up the HTML and CSS Styles Create a container div around the iframe code and give it a class eg: <div class="video-container"><iframe......