What do you think? Discuss, post comments, or ask questions at the end of this article [More about me]

Often we want to embed videos from various sources on a webpage or, in this context, into a confluence page.  This can be done in a straight-forward fashion by using the confluence HTML macro (which needs to be enabled btw).  See below for a standard youtube video embed:

The above HTML snippet contains an embedded youtube video wrapped in a div which centres it on some section on a page.

However, the above video is not responsive to webpage resizing.  That is, it will be truncated if the webpage is resized or if a user tries to access your page from a tablet or mobile phone (for example).

This guide outlines how to make responsive video embeds that will fill a container, and resize dynamically for different sized windows / screens.

Guide

This approach slight changes to both the HTML snippet and CSS / stylesheets in confluence (either the stylesheet for the space or the global styleshee: General configuration → Stylesheett).

Stylesheet changes

We need to define several CSS styles that will be doing the dynamic resizing of our embedded video.  Enter (and modify) the following CSS into the stylesheet.  Note the fist CSS block is optional and just creates a container which will force the embedded video to have a max size of 640px.  This is just my preference for my about me page where I have quite a few embedded videos.

/* video-container class for responsive 100% width (into a container) video */
.container-640 {
    max-width:640px;
    margin:auto;
}
.video-container {
	position:relative;
	padding-bottom:56.25%;
	height:0;
	overflow:hidden;
}
.video-container iframe, .video-container object, .video-container embed {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

HTML snippet

Change your HTML snippet as in the below example.  Basically, you need to wrap the snippet in a <div class="video-container">.  Note here that we can remove the width...height... arguments from the original embed since this responsive version will fill (aspect-proportional) it's container.  Also note that I've wrapped this in my "container-640" CSS class to constrain the video to a max width of 640px.

HTML snippet for responsive version of video embed above
<div class="container-640">
    <div class="video-container">
         <iframe src="https://www.youtube.com/embed/j1wzMn8iH2s?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
     </div>
</div>