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:
Based on the excellent suggestion by digdug, this community is to share style sheets/.css templates you can use for posts. If you're a .css expert, we'd welcome some experienced experts to become moderators.
Please do not redefine standard html tags in your templates (e.g., don't do this: blockquote { font-size:30px; }), as it can cause problems with comments that use those tags. Always create your own classes - e.g.:
<style>.my-blockquote { font-size:30px; }</style>
<div class="my-blockquote">my very large blockquote</div>
I've taken the liberty of updating all posts that had videos but didn't use this technique. They should now all be visible properly on mobile devices.
As we've just upgraded to Bootstrap 3.2, which now includes responsive embed for videos, you should now only need to use the following code to make videos responsive:
As a follow-up, and because we use Bootstrap 3, to make your images responsive:
To make your images right justified, use something like:
If you want your videos right justified, it's as simple as: