Based on this excellent idea, some of us have been including style sheets (.css) in posts to make content look a whole lot nicer. However, I noticed that videos weren't showing properly on posts when using mobile devices. In other words, videos weren't being responsive using the existing templates some were using. (Videos will be responsive if you use the Embed Media Content from Various Sites icon in valME's editor because that uses the css class embeddedContent which we've coded to automatically make videos responsive.) Using this trick, you can make videos responsive if you're using a customized style sheet.

Here's how it works: let's say you're using the following <style> code to float a video to the right:

.right {
	float: right;
	padding: 0 5px 0 15px;
	margin: 10px 30px 20px 20px;
	border-style:none;
}

...and you intend to include a video later like this (the iframe code you pasted from YouTube's share button):

<div class="right"><iframe allowfullscreen="" frameborder="0" height="315" src="//www.youtube.com/embed/my_video_code?rel=0" width="420"></iframe></div>

On a desktop, that video will properly float to the right, and text will go around it. However, on a mobile device, the video will look like it's been cut in half, with only 50% of the screen showing. Not good. Instead, you'll want to include max-width:100% in your .css like this:

.right {
	float: right;
	padding: 0 5px 0 15px;
	margin: 10px 30px 20px 20px;
	border-style:none;
	max-width:100%;
}

Next, you'll want to add the following two additional classes (you can name them whatever you'd like):

.video-container {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}

.video-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

Now that you've added those css styles, you're going to add an extra <div> to your HTML and you're also going to specify the width of the video as a style (you can get the width from the code you pasted from YouTube):

<div class="right" style="width:420px;">
<div class="video-container"><iframe allowfullscreen="" frameborder="0" height="315" src="//www.youtube.com/embed/my_video_code?rel=0" width="420"></iframe></div></div>

We add the width to the style of the div instead of the css so that you can use the same class for multiple videos with different widths. Now when you view this video on your desktop, it will look just as it did before. However, when you view it on your mobile device, the video will shrink so that you can see the full video (instead of only half).

UPDATE #1:

As a follow-up (see comment below), and because we use Bootstrap 3, to make your images responsive:

<img src="..." class="img-responsive" />

To make your images right justified, use something like:

<img src="..." class="img-responsive" style="float:right;padding:0 5px 0 15px;margin:10px 30px 20px 20px;border-style:none;max-width:50%;" />

If you want your videos right justified, it's as simple as:

<div class="embed-responsive-item" style="float:right;padding:0 5px 0 15px;margin:10px 30px 20px 20px;border-style:none;max-width:50%;"><iframe allowfullscreen="" frameborder="0" height="315" src="..." width="420"></iframe></div>

UPDATE #2:

Revised .css guidance based on a recent upgrade.