According to the FCC, nearly 34 million Americans lack access to fixed broadband internet access. Living in large cities in developed nations, we get accustomed to fast internet speeds.
Adding another JavaScript library or additional code to download is rarely the best solution. So much for that argument!Īs a content provider, you are focused on getting the content to your audience with as few interruptions as possible. If someone is not comfortable manually adding a line of HTML to the video embed code, Embed Responsively will do it for them. Fortunately, that is no longer the case.Īnother justification for using JavaScript is that publishers may not be tech-savvy enough to do more than copy and paste a video embed snippet. Code started getting messy fast when we had to use several conditionals to check if the user agent was Internet Explorer and implement several CSS workarounds for various browsers. This type of blanket approach made sense when we needed to support many different browser versions with little or no support for modern web standards. Most articles I’ve read on the topic recommend using JavaScript to try and handle all possible scenarios. There are several approaches we can take using CSS, JavaScript, or a combination of the two. This happens when the source video is pillarboxed to fit a 4:3 aspect ratio then played back at 16:9. by increasing the width without adjusting the height accordingly).īlack bars on all sides of a video are called windowboxing. You will see pillarboxing in embeded video when you set a wider aspect ratio than the original (i.e. The player adds these bars to prevent distortion of the video image.īlack bars at each side of a video, called pillarboxing, are added to fit a 4:3 aspect ratio video in a 16:9 player. With most web video players, you will see letterboxing when you increase the height of an embedded video without changing its width. Black bars at the top and bottom of a video, called letterboxing, are common on videos with a widescreen (16:9) source that have been formatted to fit a 4:3 aspect ratio.
The video in the blue box has a fixed width and height, which causes it to spill over into the adjoining content area when the width of the blue box is less than the video width.ĭesktop users can narrow the browser window and the video will eventually stick past the page and not be fully visible.Īnother drawback of specifying the dimensions of a video is the black bars that display when the dimensions do not match the source aspect ratio. The section below is split into two columns, as seen by the blue and black boxes. Specifying a fixed width and height for a video can cause layout issues. What we are left with are the same concerns for responsive images: aspect ratio, quality, and file size. However, we can simplify things by ignoring file types, video and audio codecs, the video player, and the video source for this discussion. We probably don’t hear about responsive video often because video is complicated. We want to avoid static sizing that can break page layouts, distort the image, or display black bars around the video. In order for a video to be responsive, the video should always expand to fill the width of its container while maintaining its original aspect ratio. What is responsive video and why don’t we hear more about it? Yet, people rarely mention video when they talk about responsive design. This is just my preference for my about me page where I have quite a few embedded videos.Video is more prevalent on the web than ever before. 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. Enter (and modify) the following CSS into the stylesheet. We need to define several CSS styles that will be doing the dynamic resizing of our embedded video. 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).
This guide outlines how to make responsive video embeds that will fill a container, and resize dynamically for different sized windows / screens. 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). However, the above video is not responsive to webpage resizing. The above HTML snippet contains an embedded youtube video wrapped in a div which centres it on some section on a page. See below for a standard youtube video embed: This can be done in a straight-forward fashion by using the confluence HTML macro (which needs to be enabled btw). Often we want to embed videos from various sources on a webpage or, in this context, into a confluence page.