Fix aspect ratio for embedded videos

[tomkeays]

With Gutenberg (Wordpress 5.0), videos are responsive out the the box. However, our lemoyne theme is not handling this well: videos embedded using the Gutenberg video block are spilling out of the central column over to the the right margin.

With a little experimenting using the Simple Custom CSS plugin, I found this will fix it. Now, I need to incorporate it into the theme's CSS and not rely on the custom CSS.

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
  max-width: 100%;
}

/* this class should be placed in a div surrounding an iframe-embedded YouTube or Vimeo video */
.wp-embed-aspect-4-3 {
   position: relative;
   padding-bottom: 56.25%; /* 16:9 */
   padding-top: 25px;
   height: 0;
}
.wp-embed-aspect-4-3 iframe {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}

[tomkeays]

Hmmm... are these videos 4:3 or 16:9? My custom CSS -- which I got in part from here -- has the latter but the Gutenberg block is putting in the class wp-embed-aspect-4-3. My solution is working, but maybe it could be better.