Handling Inserted Images and Videos (YouTube)

When writing up training materials for a customer on managing a WordPress site, came across this subtle feature that themes need to handle: handing inserted images and videos (YouTube).

In particular, the WYSIWYG editor allows one to left, center, and right align images which puts certain classes on the image that the theme's style needs to handle: https://codex.wordpress.org/Wrapping_Text_Around_Images.

The following is a solution that also handles small (phone) screens gracefully.

style.css

img.alignleft, img.alignright, img.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10px;
  height: auto;
  max-width: 100%;
}

@media (min-width: 768px) {
  img.alignright {
     float: right;
     margin-left: 10px;
  }
  .alignleft {
     float: left;
     margin-right: 10px;
  }
}

While not so much of a theme issue, one also needs to handle videos, e.g., how does one wrap text around videos (handle small screens).  In this case, the solution is a plugin: https://wordpress.org/plugins/advanced-responsive-video-embedder/.