March 1Mar 1 Administrators 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; } 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 » ★ +1 Sign in to track progress
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.