HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
If the width property is set to 100%, the video player will be responsive and scale up and down
If the width
property is set to 100%, the video player will be
responsive and scale up and down:
video {
width: 100%;
height: auto;
}
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.
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:
video {
max-width: 100%;
height: auto;
}
We want to add a video in our example web page. The video will be resized to always take up all the available space:
video {
width: 100%;
height: auto;
}