Quickly and easily include videos on your site, whether they're YouTube or Vimeo enbeds, or even self-hosted videos. The Video tool automatically makes your videos responsive for all display and device sizes.
The Video tool provides a great way to communicate ideas, instructions and more to your visitors.
As with Foundry v2's older Video Embed tool, the new Video tool will allow you to include embedded videos from YouTube and Vimeo. But the Video tool takes things further, allowing more advanced users to include their own, self-hosted video files as well.
Additionally we've added several new features to the embed options for YouTube and Vimeo.
Allows you to add a custom label to the top title bar of the tool. This lets you quickly identify what purpose you're using that tool for in your layout. This title is also visible when you've collapsed or hidden the contents of the tool in Edit Mode.
When enabled a preset margin will be added to the base of the tool. Foundry allows you to configure the Base Margin preset to your liking within the Control Center. The Base Margin can be configured independently at each of the 6 responsive breakpoints.
This setting allows you to choose which type of video you've like to include on your page, whether it be an embed from YouTube or Vimeo, or a self-hosted video of your own.
The section below this setting will transform quite a bit based on which of the modes you've selected. We've grouped the settings together in mode types below. Not all of these options will be visible or available for each mode.
This is the ID of the video from YouTube that you wish to embed on this page. Note that this is not the URL for the video, but instead the ID that is created and provided by YouTube. If you're unfamiliar with where to get the ID for your YouTube video, please watch the tutorial video for the Video tool.
When enabled this feature causes your video to begin playing as soon as the page loads.
Allows you to have your video automatically restart after it has played all the way through. This can be very useful when using the Auto Play feature above.
This feature allows you to decide whether or not the control bar on the video will be available to the visitor, or not. If you disable this feature, but have not enabled Auto Play then the video will have no way to begin.
When enabled the audio for the video will be turned off. If the Player Controls are enabled the visitor will have the option to unmute the video.
This feature, when enabled will allow you visitor to click on a full-screen button to make the video fill te entirety of their screen.
When enabled this feature uses YouTube's special nocookie URL structure to prevent YouTube from using cookies for this particular video embed.
Enable this feature to have your video begin playback at a specific point of your choosing. The distance, from the beginning of the video, is mesured in seconds. If you want to start at 1 minute and 32 seconds into a video for example you would use 92 seconds as the Start At time.
Allows you to provide a Title tag for the video. This can help accesibility for screen readers.
This is the ID of the video from Vimeo that you wish to embed on this page. Note that this is not the URL for the video, but instead the ID that is created and provided by Vimeo. If you're unfamiliar with where to get the ID for your YouTube video, please watch the tutorial video for the Video tool.
When enabled this feature causes your video to begin playing as soon as the page loads.
Allows you to have your video automatically restart after it has played all the way through. This can be very useful when using the Auto Play feature above.
This feature allows you to decide whether or not the control bar on the video will be available to the visitor, or not. If you disable this feature, but have not enabled Auto Play then the video will have no way to begin.
When enabled the audio for the video will be turned off. If the Player Controls are enabled the visitor will have the option to unmute the video.
Vimeo supports a picture-in-picture mode. This can be useful for visitors who wish to watch your videos from your site while doing other tasks. This can be especially helpful for instructional videos. Enabling this feature allows your visitor to opt to use this mode.
When enabled this feature uses Vimeo's Do Not Track mode which prevents Vimeo from using cookies to track visitors for this particular video embed.
Here we provide a few controls which allow you to choose what is displayed on top of your Vimeo video embed. You can opt to show or hide the Video Title, the Video Byline and the Author Portrait.
These settings can only affect the video if the settings for the video itself, in your Vimeo account, are configure to allow these items to be hidden.
Enable this feature to have your video begin playback at a specific point of your choosing. The distance, from the beginning of the video, is mesured in seconds. If you want to start at 1 minute and 32 seconds into a video for example you would use 92 seconds as the Start At time.
Allows you to provide a Title tag for the video. This can help accesibility for screen readers.
The Poster Image is used for displaying to the visitor prior to them clicking the play button. It is much easier and faster to load an image as the Poster Image placeholder for the video until it is played. Drag-and-drop your Poster Image here to add it to your self-hosted video.
Here we have controls for linking up your self-hosted video files. The tutorial video for the Video tool walks your through how to use these controls as well as offers advice on converting your videos to the needed formats.
This feature allows you to decide whether or not the control bar on the video will be available to the visitor, or not. If you disable this feature, but have not enabled Auto Play then the video will have no way to begin.
When enabled this feature causes your video to begin playing as soon as the page loads.
This feature allows your video to automatically start playback, much like the Auto Play feature, but the playback does not start until the visitor has scrolled far enough down the page to reveal the video.
If the visitor scrolls further, the video stops playing once it is out of view.
The Scroll Trigger feature watches for the scrolling of the browser window itself, and thus cannot trigger when placed in something like the Partitions tool, which scrolls independent sections and not the page itself.
Allows you to have your video automatically restart after it has played all the way through. This can be very useful when using the Auto Play or Scroll Trigger features above.
When enabled the audio for the video will be turned off. If the Player Controls are enabled the visitor will have the option to unmute the video.
When enabled you can add an ARIA label for accessibility to your video.
Foundry provides 5 different presets for rounded corners. These can be found throughout Foundry's various tools. You're also able to remove the roundness of the corners by setting this to none, or provide your own custom value for the border radius, or rounded corners. When using Custom mode you can set a different value on each of the four corners.
Used to add a decorative shadow to the button. Foundry provides a variety of preset shadow styles, as well as access to a user defined preset that you can configure in the Control Center. Additionally for one-off shadows there is also a custom shadow option where you can create a unique shadow style, setting its positioning, size, spread and color.
Lazy loading video embeds as the visitor scrolls down the page can improve page load times as videos are quite large and can take time to load. The feature uses HTML's native lazy loading property. This is supported by most modern web browsers.
Enabling this feature adds an HTML comment to the exported code to indicate the name of the tool being used here. This is helpful to both yourself and others when troubleshooting, or inspecting the code. This is enabled by default.
This field allows you to replace the default HTML Comment with your own text.
Allows you to specify an options class, or classes, that will be added to this tool's wrapper. You can use this to apply custom styling from the Blacksmith tool, or add a Bootstrap v5 preset class to your item. If you're applying more than one class be sure that you separate each class name with a space. Do not use special characters.