Webflow Tutorial: Play Video When Clicking a Custom Icon

CMSWebflow Tutorial: Play Video When Clicking a Custom Icon

Webflow Tutorial: Play Video When Clicking a Custom Icon

4 mins Read

Build with Radial Code

Radial Code Enterprise gives you the power to create, deploy and manage sites collaboratively at scale while you focus on your business. See all services.

Contact sales

Let's break down the steps!

Step 1: Set Up the Basic Structure

Drag a Section: Start by dragging a Section element to your page.
Add a Container: Inside the Section, add a Container.
Add a Div Block: Now, drag a Div Blockinside the Container.
Name this Div (for example, class-name) to give it a unique identifier.

Step 2: Set a Fixed Height for the Div

To ensure your video is displayed properly, give the Div Block a fixed height.

You can set this in the Style panel:

Select your Div Block.
Set the height (e.g., 500px).

Step 3: Set Position to Relative

Now, we need to position our elements correctly.

Select the Div Block and go to the Style Panel.
Set the position to relative.
Add a Div Block: Now, drag a Div Blockinside the Container.
This is necessary for positioning the overlay image and play button properly within the Div.

Step 4: Embed the YouTube Video

Now, we need to position our elements correctly.

Drag an Embed Code element inside the Div Block (class-name).
Paste the following code into the Embed element:


    <iframe class="video" src="https://www.youtube.com/embed/eS5jLhqKFw4?enablejsapi=1&html5=1&mute=1" frameborder="0" allowfullscreen style="width:100%; height:100%;"></iframe>

The src attribute contains the YouTube video URL.

Replace eS5jLhqKFw4 with your desired video ID.

This code ensures that the video will fit perfectly inside the Div.

Step 5: Set the Height and Width of the Embed Code

Make sure the video fills the Div:

Adjust the iframe's width and height to fill 100% of its container.
This ensures the video takes up the full height and width of the Div you set earlier.

Step 6: Add an Overlay Image (Optional)

If you want to display an overlay image on top of the video (e.g., a thumbnail) that disappears when the play button is clicked:

Drag an Image element inside the Div Block (class-name).

Set the position of the image to absolute and set its width and height to 100%. Ensure the image scales to completely cover the div.

Step 7: Add the Play Icon

Now, let’s add the play icon:

Drag an Icon Image (like a play button) into the Div Block (class-name).
Set the position of the icon to absolute.
Use the transform property to center the icon:
Set translate to 50% for both X and Y axes to center the icon within the Div.

Step 8: Set the Icon to Play the Video

To enable the icon to start the video playback:

Set the class of the icon to Play Button.
If you want to change the video, simply replace the video ID in the URL. For example, change the video link to
https://youtu.be/PjoP5wQH9dA?si=SFAGBZwB9is2zMxP - PjoP5wQH9dA is the new video ID.

Step 9: Hide the Image on Icon Click

To remove the overlay image when the play icon is clicked:

Go to the Interactions panel.
Set up an interaction that hides the image once the play icon is clicked. This will reveal the video and start playing it.

Step 10: Publish and Test

Once everything is set up:

Publish the site..
Test the website by clicking the custom icon. The video should start playing, and the overlay image will disappear.

Conclusion

That’s it! You’ve now created a fully interactive setup in Webflow where clicking your custom icon starts the embedded YouTube video. It’s a clean, user-friendly solution for adding interactive video features to your site.
Feel free to tweak the styles and interactions as needed, and you can even customize the appearance of the play button and video overlay to match your design.
Want to level up your Webflow game? Check out Radial code.