How to make embed YouTube iframe mobile responsive

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)
Tags:

Was this article helpful?

Related Articles