Introduction
Display Youtube, Vimeo, or an externally-hosted video.
Block settings
Aspect ratio
Read more about aspect ratio settings here.
Autoplay video
Checking this box will automatically play the video when a user scrolls to it; will pause when user scrolls past it.
Loop video
Checking this box will make the video loop infinitely unless paused with video controls or scrolled past it.
Mute video
Checking this box will mute the video by default. Highly recommended if you autoplay the video.
Video service url
If your video is hosted on YouTube or Vimeo, use this text box to enter its link. Note: this should be the url of the video that you enter to your address bar and not the embed url or code.
Hosted video url
If your video is hosted on Shopify or another hosting provider, use this text box to enter its link. Navigate to the files section of Shopify settings to find or upload the video.
Video poster image
An image uploaded here will be used as a "poster" for the video - it will display as the first frame of your video and will fade out when clicked on non-autoplayed videos. If the videos are autoplayed, it will be used as a placeholder until user scrolls to the video. A poster is highly recommended if using hosted video, however, it will be auto-populated from YouTube or Vimeo.
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.
