Overview #
The Video block is designed to integrate video content into various sections of your site. It supports videos from platforms like YouTube, Vimeo, or self-hosted sources, offering a range of customization options to enhance the visual and functional presentation of video content.
Key components and functionality #
Video block
The Video block allows you to display video content in sections such as Collage, Video with text, Slideshow, Multicolumn, Product information, Featured product, and Hero. This block is versatile and can be tailored to fit different design and functional needs.
Alignment settings
These settings enable you to adjust the alignment of video content on both desktop and mobile devices, ensuring optimal presentation across different screen sizes.
- Alignment - Desktop: Adjusts the horizontal alignment of the video on desktop views.
- Alignment - Mobile: Adjusts the horizontal alignment of the video on mobile views.
Video settings
Video settings control the source and display of the video content, allowing for a seamless integration of video into your site.
- 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 content. Be mindful of 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 default, landscape, portrait, square, ultrawide, or widescreen. Default: default
- Aspect ratio - Mobile: Similar options as above, tailored for mobile views. Default: default
- Max video width: Set the maximum width of the video. Default: 0 (stretches to full available width)
- Autoplay video: Enables the video to play automatically when loaded.
- Loop video: Repeats the video once it finishes.
- 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 customize captions for your video content, enhancing the viewer's understanding and engagement.
- Media caption: Use this to create a caption above or below your media content.
- Text alignment: Adjusts the alignment of the caption text.
- Caption position: Choose to position the caption at the top or bottom of the video.
Overlay settings
Overlay settings add a color or gradient on top of the video, which can help maintain a consistent color scheme or enhance text readability.
- Overlay color: Choose a color for the overlay.
- Overlay gradient: Apply a gradient overlay.
- Overlay opacity: Adjust the opacity of the overlay. Default: 48%
Editor settings
Editor settings are optional and used to customize your theme editor experience, providing a personalized touch to your editing interface.
- Editor title: Customize the title displayed in the theme editor. Default: Video
Visibility settings
Visibility settings control when and where the video block is displayed, allowing for a tailored user experience across different devices.
- Visibility: Options to hide the video on desktop or mobile, or not hide it at all. Default: do not hide
Available in sections #
- Collage
- Video with text
- Slideshow
- Multicolumn
- Product information
- Featured product
- Hero
Usage examples #
-
Embedding a YouTube video: Use the Video service URL setting to input a YouTube link. Adjust the aspect ratio and alignment settings to ensure the video fits well within your section layout.
-
Adding a caption: Utilize the Media caption setting to add descriptive text to your video. Position it at the top or bottom and align it as needed for better visual appeal.
-
Applying an overlay: Use the Overlay settings to add a color or gradient over your video. This can help in maintaining a consistent color scheme or enhancing text readability over the video.
These settings and examples provide a comprehensive guide to effectively using the Video block within your theme, ensuring a seamless integration of video content across various sections.
Align v1.7 is out now! Learn more about our best release yet →