Introduction
Displays a hosted video in the background or featured image placement of a block or section.
Of note
Looping video
Featured and background videos will loop by default.
Muted video
Featured and background videos will be muted by default.
Video quality and bitrate
It's very important to pay attention to your video quality and bitrate when using video on the web — folks will need to download the video's data to play it, and you want them to be able to download that data quickly.
But of course you also want to look good... it's a tricky balance sometimes to get your encoding in the "sweet spot," but we've shared a few tips & tricks below.
TLDR — As a very general rule of thumb, when creating a background or featured video, we always try to keep our videos to a max bitrate of 2500kbps — we target 2000kpbs but allow for a 2500kbps peak via variable bitrate encoding.
If the video is small, like in a small banner, we'd recommend going even lower — for those smaller videos, we would generally target 1000kpbs but allow for a 1500kbps peak via variable bitrate encoding.
Of course there are exceptions when you'll want a higher quality (and higher bitrate) video — do some experimenting and with some time you'll find the best encoding profile for your situation.
Video format
And we recommend encoding into an mp4 file format — webm is a newer format with better compression, but it doesn't have universal support, which mp4 (mostly) does.
More detailed info below!
More information about video encoding
Video content has become a ubiquitous part of the web experience. From entertainment to education, videos have revolutionized the way we consume content online. With advances in technology, it has become easier than ever to create and upload videos on the web. However, it is important to understand the technical aspects of video on the web, such as encoding, bitrate, and bandwidth constraints, to ensure the best possible viewing experience for users.
Encoding is the process of converting a video file into a format that can be played back on the web. The most commonly used video format on the web is the H.264 codec. This codec is supported by most web browsers and devices and offers a good balance between video quality and file size. Other codecs, such as VP9 and AV1, offer better video quality at the cost of larger file sizes and higher computational requirements.
The bitrate of a video refers to the amount of data that is transferred per second when the video is being played back. A higher bitrate means a higher quality video, but also a larger file size and more bandwidth required to stream the video. The optimal bitrate for a video depends on several factors, including the resolution of the video, the complexity of the content, and the available bandwidth.
Bandwidth constraints can limit the quality of video playback. When streaming a video, the playback quality may be affected by the available bandwidth, which can fluctuate depending on the user's internet connection and network congestion. To ensure a smooth viewing experience, it is important to optimize video encoding and bitrate to minimize the impact of bandwidth constraints.
When uploading a video to the web, it is important to consider the intended audience and their device capabilities. Mobile devices may have limited processing power and smaller screens, which can affect the optimal bitrate and resolution of the video. Adaptive bitrate streaming can be used to deliver the best possible quality video based on the user's device and available bandwidth.
In addition to the H.264 codec, there are several other video formats that are commonly used on the web. Here are some of the most popular ones:
- MP4: This is a widely used video format that is compatible with most web browsers and devices. It uses the H.264 codec for video compression and AAC for audio compression. MP4 is often the format of choice for video sharing websites like YouTube.
- MOV: This is a video format developed by Apple and is commonly used on macOS and iOS devices. MOV files can contain video and audio tracks compressed with various codecs, including H.264 and ProRes.
- WebM: This is an open-source video format developed by Google. It uses the VP9 codec for video compression and Opus for audio compression. WebM is designed to provide high-quality video with smaller file sizes, making it an ideal choice for web video.
- AVI: This is an older video format that is still used on some websites. AVI files can contain video and audio tracks compressed with various codecs, including DivX and Xvid.
When it comes to choosing the best target bitrate for uploading videos to the web, the optimal bitrate will depend on several factors, such as the resolution of the video, the complexity of the content, and the available bandwidth. Here is a table that provides some general guidelines for target bitrates for common video resolutions:
| Resolution | Target Bitrate for highest quality (Mbps) | Target Bitrate for Web (Mbps) |
|---|---|---|
| 480p | 2-4 | 1-2 |
| 720p | 5-10 | 2-3 |
| 1080p | 8-16 | 3-4 |
| 4K | 20-50 | 4-6 |
These are just general guidelines, and the optimal bitrate will depend on the specific requirements of the video and the available bandwidth. It is important to test and optimize the video encoding settings to ensure the best possible viewing experience for users.
Video content is an important part of the web experience, and understanding the technical aspects of encoding, bitrate, and bandwidth constraints is crucial for delivering the best possible viewing experience. By optimizing video encoding and bitrate, and using adaptive bitrate streaming, video content creators can ensure their videos are accessible and enjoyable for all users, regardless of their device and internet connection.