CSS can be utilized to adjust the presentation of Interactive Videos on your website.
Customizing the presentation of Interactive Videos on your site can enhance user engagement and align the visual elements with your brand style.
Below are implementation-ready CSS snippets aimed at adjusting specific elements of your videos, along with potential use cases for each customization. Simply apply the following CSS snippets to your implemented Interactive Videos to style them.
All following CSS snippets have been populated with preset values. Adjustment to these values may be required to meet your needs.
Carousel
Adjust Carousel Dimensions
Use this code to adjust the height and width of an Interactive Video Carousel on site.
Potential Use Case: Ensure consistency in the size of videos displayed within the carousel, providing a visually cohesive browsing experience for users.
/* customize Dimensions */
.gp-carousel-con .carousel-wrapper {
width: 192px !important;
min-width: 192px !important;
height: 288px !important;
}
Customize Spacing Between Carousel Videos
Use this code to adjust the spacing between videos in an Interactive Video Carousel.
/* customize space between carousel items and bottom padding */
.gp-carousel-con {
gap: 30px !important;
padding-bottom: 20px !important;
}
Customize Carousel Item Border Radius
Use this code to adjust the video border-radius property, allowing control over the shape of videos in an Interactive Video Carousel .
Potential Use Case: Modify the border radius to match your brand's aesthetic, creating a seamless integration of the carousel into your website design.
/* customize carousel item border radius */
.gp-carousel-con video,
.gp-carousel-con .carousel-wrapper {
border-radius: 0 !important;
}
Add a Scrollbar to the Carousel
Use this code to add a visible scrollbar beneath your Interactive Video Carousel.
Potential Use Case: Enhance user experience by providing a visible scrollbar, allowing users to easily navigate through a large number of videos within the carousel.
/* add a scrollbar */
.gp-carousel-con::-webkit-scrollbar {
display: block !important;
height: 8px;
}
.gp-carousel-con::-webkit-scrollbar-track {
background: #f1f1f1;
}
Middle Justify Carousel
Use the first snippet to adjust the positioning of your Interactive Video Carousel, bringing it to the centre of the page for screen sizes of minimum 800px.
Use the second snippet to adjust the positioning of your Interactive Video Carousel, left justifying it for screen sizes of maximum 800px.
Potential Use Case: Ensure optimal positioning of the carousel on different screen sizes, maintaining visual balance and alignment with other page elements.
/* middle justification for minimum 800px display */
@media (min-width: 800px) {
{
display: grid;
justify-content: center;
}
}
/* left justification for maximum 800px display */
@media (max-width: 800px) {
{
margin-left: 20px;
}
}
Left Justify Carousel
Use this code to adjust the positioning of your Interactive Video Carousel, bringing it to the left side of the page and allowing control of the left margin.
{
margin-left: 20px;
}
Widget
Customize Widget Positioning
Use this code to adjust the position of the Video Widget, allowing it to display in the bottom left or bottom right corner of the screen.
Include this script in the same custom code embed as your Collection Snippet, allowing it to target the widget container.
Potential Use Case: Adjust the position of the Video Widget to optimize visibility and accessibility, ensuring it doesn't obstruct important content while remaining easily accessible to users.
<script>
function customizeWidgetCSS() {
const style = document.createElement('style');
style.type = 'text/css';
const customWidgetCSS = `
/* customize Position */
[data-testid="widget-container"] {
right: auto;
left: 20px;
bottom: 40px;
}
`;
style.appendChild(document.createTextNode(customWidgetCSS));
document.head.appendChild(style);
}
customizeWidgetCSS();
</script>
By incorporating these CSS snippets, you can seamlessly customize your Interactive Videos to align with your brand's style and provide an enhanced user experience on your website.