Responsive videos with embed


#1

When I use the new Embed function with a video link from youtube, the embedded video is not reponsive and would have a fixed height and width. Is there a CSS code I can use to make it responsive or is there anyway around it? I know I can add a wrapping div and add padding to it to make it responsive but I’m looking at it from a client’s perspective as they don’t know how to code and would have been a lot easier for them to just paste the video link with the embed function and have it responsive.


#2

The editor wraps embeds with <div data-embed="true"> and you can reference that container in your stylesheet:

/* Responsive embeds */
[data-embed] { 
  position: relative; 
  padding-bottom: 56.25%; 
  height: 0; 
  overflow: hidden; 
  max-width: 100%; 
}

[data-embed] iframe, 
[data-embed] object, 
[data-embed] embed {
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%;
}

This will make videos from YouTube, Vimeo, etc. render at 100% of your page’s width (and height will adjust accordingly).