Video Zoom
Add elegant, lightboxed video embeds to your page using your choice of YouTube and Vimeo videos.
- Include embedded Vimeo or YouTube videos as lightboxes.
- Include drop shadow on thumbnail.
- Customize with "play" icon on top of thumbnail.
- Round thumbnail corners.
Example
Header
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam.
Header
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam.
Using Video Zoom
General
Type
Choose between using a Vimoe or YouTube embed.
ID
Depending on which you choose, Vimeo or YouTube, you will enter the video’s ID here.
Thumbnail
Thumbnail
Drag and drop an image here to act as your thumbnail. The visitor will see and click on this thumbnail to open the video lightbox.
Alignment
Align the thumbnail to the left, center or right.
Image Sizing
This feature allows you to choose how Foundry displays your thumbnail image when it comes to responsive sizing. You can choose to have the image display normally, as-is and only scale downwards when the image would otherwise begin to overflow the bounds of its parent container or you can choose one of the following:
- Normal: Image retains its original height and width and only scales downward for display on smaller devices.
- Upscale to 100%: Forces the image to scale itself past its original size, enlarging itself to fill out the entire width of its parent container.
- Max-Width: Set a maximum width for your image. The image will never scale up beyond this value but will still responsively scale downwards to ensure it fits within the bound of its parent container.
Drop Shadow
Allows you to add a customizable drop shadow to the thumbnail. You can adjust the shadow size, vertical and horizontal offset as well as its color.
Round Corners
Set the roundness of the thumbnail’s corners. You can do this uniformly or on a corner-by-corner basis
Alt. Tag.
Provides you a way to add an Alt. Tag to your thumbnail. The alt tag is used in HTML to specify alternative text that is rendered when the element to which it is applied cannot be displayed. It is also used by "screen reader" software so that a person who is listening to the content of a webpage (for instance, a person who is blind) can interact with this element.
Thumbnail Icon
Thumbnail Icon
Enabling this feature allows you to overlay a "play" icon on top of your thumbnail. You can customize the icon, its color and the icon’s background color. The colors can be set differently for both their normal and hover states.
Icon Border
Enabling this feature will add a border around the Thumbnail Icon. When enabled you can adjust the border color for both its normal and hover states, as well as adjust the size of the border.