Responsive Web Design - Videos
Responsive Web Design - Videos
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;
}
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;
}
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;
}
Responsive Web Design - Videos
Reviewed by Cadotz media
on
October 06, 2018
Rating:
![Responsive Web Design - Videos](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu7fkzy0vBGO8EeH-rJ-dB4HizixoLL8R_LIIN-K4Uf6PH7CMJBnayb7n8dz-ym_XJMaw471fieRwBmXtzU9OHoduHICxduSyCVoUbYGUMrj1jtKL_JJJQ47Dr6fYee0Y9Vs23CPhy-C4/s72-c/IMG_20190124_171942_174.jpg)
Post a Comment