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.
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).
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.
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.