Add videos to your Gravity Forms

Adding auto-play videos to your Enhanced Choices in Gravity Forms is a creative way to boost user engagement and make your forms more interactive. By incorporating videos that play on hover, you provide a dynamic preview of products, services, or experiences, helping users make informed decisions quickly.

With a bit of extra code and CSS,this design experiment not only enhances the visual appeal of your forms but also adds real value by giving users richer content in an intuitive, engaging way. Check out some of the design experiments below with this innovative idea!

What you’ll need

To get started re-creating some of the demos on adding videos to your Gravity Forms, make sure you grab a copy of Enhanced Choices and Gravity Forms.

Gravity Forms

Enhanced Choices for Gravity Forms

Code Chest by Gravity Wiz (optional)

Add suggested CSS and class names to the field

Supplied Custom Javascript

Full card videos

Give your cards a full background look and feel with some simple CSS and the Enhanced Choices HTML component inside your choices cards.

HTML Component

Pro Tip!

You can toggle on and off the HTML component to see how the final HTML will render within the editor.

Add the HTML embed markup

Add an HTML content block to your Enhanced Choices within the choice editor and add the below HTML markup to the content. Simply just replace the video src with a link to the video in your media library or an external source.

<div class="video-card"><video tabindex="-1" loop="true" muted="true" playsinline="true" autoplay="false" src="https://assets.jetsloth.com/wp-content/uploads/2024/10/14101150/video3.mp4"></video></div>

Full frame CSS

You’ll want to add the below CSS to also get this effect. The CSS relise on the class ec-video-cards-full so head over to the appearance tab for your enhanced choices field and add the class name ec-video-cards-full .

/* Full frame Video cards */
.ec-video-cards-full .video-card {
	width: 100%;
	height: 400px;
	overflow: hidden;
	display: flex;
	justify-content: start;
	align-items: end;
 border-radius: 10px;
 overflow: hidden;
}
.ec-video-cards-full  .ec-cmp-html .video-card video {
	width: auto !important;
	height: 100% !important;
	aspect-ratio: 1/0.5625;
}

.ec-video-cards-full .ec-card {
	position: relative;
	min-height: 400px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
}
.ec-video-cards-full .ec-cmp-html {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 0;
}
.ec-video-cards-full .ec-cmp:not(.ec-cmp-html) {
	position: relative;
	z-index: 1;
}

Autoplay on hover

Want to make your choices interactive and autoplay the video on choice hover? We’ve got you covered! Simply add the below Javascript to your form. We suggest using Gravity Forms Code Chest by Gravity Wiz to easily add the below JS to your form.

Add the HTML embed markup

Add an HTML content block to your Enhanced Choices within the choice editor and add the below HTML markup to the content. Simply just replace the video src with a link to the video in your media library or an external source.

<div class="video-card"><video tabindex="-1" loop="true" muted="true" playsinline="true" autoplay="false" src="https://assets.jetsloth.com/wp-content/uploads/2024/10/14101150/video3.mp4"></video></div>

Add the Javascript for auto-play on hover

To add the video play on hover, as mentioned before, we suggest using Gravity Forms Code Chest by Gravity Wiz to easily add the below JS to your form.

document.querySelectorAll('.video-card video').forEach($video => {
	const $choice = $video.closest('.ec-card');
	$video.pause();
	if ($video.fastSeek) {
    $video.fastSeek(0);
}
else {
    $video.currentTime = 0;
}
	jQuery($choice).hover( 
		() => {
			$video.play();
		},
		() => {
			$video.pause();
			if ($video.fastSeek) {
    $video.fastSeek(0);
}
else {
    $video.currentTime = 0;
}
		}
	);
});

Custom CSS

You’ll want to add the below CSS to also get this effect. The CSS relise on the class ec-video-cardsso head over to the appearance tab for your enhanced choices field and add the class name ec-video-cards.

.video-card {
	width: 100%;
	height: 300px;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
}
.ec-cmp-html .video-card video {
	width: auto !important;
	height: 100% !important;
	aspect-ratio: 1/0.5625;
}

.ec-video-cards .ec-card {
	position: relative;
	min-height: 300px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
}