THE WORLD'S LARGEST WEB DEVELOPER SITE

☰ HTML CSS JAVASCRIPT SQL PHP BOOTSTRAP JQUERY ANGULAR XML

TUTORIALS REFERENCES EXAMPLES FORUM

×

CSS Tutorial

CSS HOME CSS Introduction CSS Syntax CSS How To CSS Colors CSS Backgrounds CSS Borders CSS Margins CSS Padding CSS Height/Width CSS Text CSS Fonts CSS Links CSS Lists CSS Tables CSS Box Model CSS Outline CSS Display CSS Max-width CSS Position CSS Float CSS Inline-block CSS Align CSS Combinators CSS Pseudo-class CSS Pseudo-element CSS Navigation Bar CSS Dropdowns CSS Tooltips CSS Image Gallery CSS Image Opacity CSS Image Sprites CSS Attr Selectors CSS Forms CSS Counters

CSS3

CSS3 Introduction CSS3 Rounded Corners CSS3 Border Images CSS3 Backgrounds CSS3 Colors CSS3 Gradients CSS3 Shadows CSS3 Text CSS3 Fonts CSS3 2D Transforms CSS3 3D Transforms CSS3 Transitions CSS3 Animations CSS3 Images CSS3 Buttons CSS3 Pagination CSS3 Multiple Columns CSS3 User Interface CSS3 Box Sizing CSS3 Flexbox CSS3 Media Queries CSS3 MQ Examples

CSS Responsive

RWD Intro RWD Viewport RWD Grid View RWD Media Queries RWD Images RWD Videos RWD Frameworks

CSS Examples

CSS Examples CSS Quiz CSS Certificate

CSS References

CSS Reference CSS Selectors CSS Functions CSS Reference Aural CSS Web Safe Fonts CSS Animatable CSS Units CSS PX-EM Converter CSS Colors CSS Color Values CSS Color Names CSS3 Browser Support

Responsive Web Design - Videos

Next Chapter »

Using The width Property

If the width property is set to 100%, the video player will be responsive and scale up and down:

Example

video {
width: 100%;
height: auto;
}

Try it yourself »

Notice that in the example above, the video player can be scaled up to be larger than its original size. A better solution, in many cases, will be to use the max-width property instead.

Using The max-width Property

If the max-width property is set to 100%, the video player will scale down if it has to, but never scale up to be larger than its original size:

Example

video {
max-width: 100%;
height: auto;
}

Try it yourself »

Add a Video to the Example Web Page

We want to add a video in our example web page. The video will be resized to always take up all the available space:

Example

video {
width: 100%;
height: auto;
}

Try it yourself »

Next Chapter »

W3SCHOOLS EXAMS

HTML, CSS, JavaScript, PHP, jQuery, and XML Certifications

COLOR PICKER

colorpicker

SHARE THIS PAGE

LEARN MORE:

Color Converter
Google Maps
Animated Buttons
Modal Boxes
Modal Images
Tooltips
Loaders
JS Animations
Progress Bars
Dropdowns
Slideshow
Side Navigation
HTML Includes
Color Palettes

REPORT ERROR

PRINT PAGE

FORUM

ABOUT

W3Schools is optimized for learning, testing, and training. Examples might be simplified to improve reading and basic understanding. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using this site, you agree to have read and accepted our terms of use, cookie and privacy policy. Copyright 1999-2016 by Refsnes Data. All Rights Reserved.