In this tutorial, we will learn how to use a Vimeo video as a full-width section on a webpage. We’ll set up the video to autoplay, loop endlessly, and ensure that the controls and audio are hidden. This setup is ideal for creating visually appealing backgrounds for your website. Let’s dive into the step-by-step guide.
Table of Contents
Step 1: Obtaining the Vimeo Video Embed Code:
To embed a Vimeo video, you need to obtain the HTML embed code. Go to Vimeo, find the video you want to embed, and click on the “Share” button.
Step 2: Configuring the Vimeo Embed Code:
In the embed options, copy the HTML code. Make sure to adjust the settings accordingly for autoplay, loop, and hidden controls. Here’s an example:
<iframe src="https://player.vimeo.com/video/927799481?h=111537893d&autoplay=1&loop=1&autopause=0&background=1&color=ffffff&controls=0&portrait=0" width="1920" height="1080" frameborder="0" allow="autoplay; fullscreen" allowfullscreen=""></iframe>
In this example:
autoplay=1: Enables autoplay.loop=1: Makes the video loop endlessly.autopause=0: Disables pausing the video when another video is played.background=1: Allows the video to play as a background element.color=ffffff: Sets the background color to white.controls=0: Hides video controls.portrait=0: Hides the user’s portrait.
Step 3: Adjusting the Embed Code:
Ensure that the width of the iframe is set to 100% to make the video full-width:
<iframe src="https://player.vimeo.com/video/927799481?h=111537893d&autoplay=1&loop=1&autopause=0&background=1&color=ffffff&controls=0&portrait=0" width="100%" height="1080" frameborder="0" allow="autoplay; fullscreen" allowfullscreen=""></iframe>
Step 4: Adding the Embed Code to Your Website:
Enable the DIVI builder and create a full-width section. Select “Fullwidth Code” widget:
In the section, click the gear icon to open its configurations. Open the design tab and set the top-bottom and left-right padding as 0.
Click on the green tick button to save the settings.
Similarly click the gear icon of the “Fullwidth Code”, open the design tab and set the top-bottom and left-right padding as 0.
Now, click on the content tab and add the Vimeo iframe code.
Click on the green tick button to save the changes.
Step 5: Testing:
Test the implementation on different browsers and devices to ensure everything works as expected.
Conclusion:
Using Vimeo video as a full-width section on your website can greatly enhance its visual appeal. By following this tutorial, you can easily set up a Vimeo video to autoplay, loop, and hide controls, creating a seamless and captivating experience for your website visitors.