Overview #
The Video section is designed to provide a full-width video display within your theme. It supports videos from YouTube, Vimeo, or self-hosted URLs, allowing for a versatile and engaging multimedia experience on your site.
Key components and functionality #
Alignment settings
Alignment settings control the positioning of content within the section, ensuring that your video and any accompanying text are positioned as desired.
- Alignment - Desktop: Adjusts the horizontal alignment of content on desktop devices.
- Alignment - Mobile: Adjusts the horizontal alignment of content on mobile devices.
Video settings
Video settings allow you to configure the video source and display options, ensuring compatibility and optimal presentation.
- Video service URL: Accepts YouTube or Vimeo links. Use the video’s URL, not the embed code. _Default: https://www.youtube.com/watch?v=9VUPq3SxOc
- Shopify-hosted video: Allows for the use of self-hosted video files. Be mindful of your video size and bitrate.
- Video poster image: Recommended if using hosted video. This image will display as the first frame of your video and will fade out when clicked.
- Aspect ratio: Choose from options like default, landscape, portrait, square, ultrawide, and widescreen. Default: default
- Aspect ratio - Mobile: Similar options as desktop, tailored for mobile devices. Default: default
- Max video width: Controls the maximum width of the video. Default: 0 (stretches to full available width)
- Autoplay video: Enables the video to play automatically when the section is loaded.
- Loop video: Repeats the video continuously.
- Mute video: Starts the video with sound muted. Default: true
- Show video player controls: Displays the video player controls. Default: true
Caption settings
Caption settings allow you to add and style captions for your video, enhancing the context and accessibility of your content.
- Media caption: Add a caption to your video or image.
- Text alignment: Adjusts the alignment of the caption text.
- Caption position: Choose whether the caption appears at the top or bottom of the video.
Overlay settings
Overlay settings add a visual layer over your video, which can enhance aesthetics or improve text readability.
- Overlay color: Adds a solid color overlay on top of the video.
- Overlay gradient: Adds a gradient overlay on top of the video.
- Overlay opacity: Adjusts the transparency of the overlay. Default: 48%
Usage notes #
- Responsive design: Ensure that your video settings are optimized for both desktop and mobile views by adjusting the aspect ratio and alignment settings accordingly.
- Performance: Be cautious with video file sizes, especially for self-hosted videos, to maintain site performance.
- Accessibility: Use captions and overlays to improve accessibility and ensure that your content is understandable for all users.
Usage examples #
-
Embedding a YouTube Video: Use the Video service URL setting to input a YouTube link. Adjust the aspect ratio to widescreen for a cinematic effect.
-
Self-hosted Video with Poster Image: Upload your video file using the Shopify-hosted video option. Add a poster image to provide a preview before the video plays.
-
Customizing Captions: Add a caption to your video using the Media caption setting. Position it at the bottom and align it to the center for a professional look.
-
Applying an Overlay: Use the Overlay color and Overlay opacity settings to add a semi-transparent black overlay, enhancing text readability over the video.
Align v1.7 is out now! Learn more about our best release yet →