The following CSS can be used to make embedded YouTube videos responsive to different screen sizes.
iframe[src*=youtube] {
display: block;
margin: 0 auto;
max-width: 100%;
padding-bottom: 10px;
}
What does it do?
- selects all iframes (what YouTube uses to embed videos) that includes ‘youtube’ in the src (source) attribute
- makes sure it is disabled as a block element
- removes any margins
- sets the width to a maximum of 100% (this is the important part)
- adds 10px of padding to the bottom to separate any other content from the iframe (optional, but generally necessary)