Full Width Slider With YouTube Video Background Using The Divi Theme

by | Feb 17, 2020 | Divi Theme, Web Design

Full width slider with YouTube video background using the Divi theme. We have WordPress installed on our site and the wonderful Divi theme activated. The first thing that we want to do is enable the visual builder so we can build on the front end. Once enabled let’s create a new section. Inside the section we want to put a row with one column. Inside the row we need to insert a video module. As we want our slider to have a YouTube video as the background, we need to go over to YouTube, find the video that we wish to have as the background and get the embed code. Usually just below the video you will see a ‘share’ link, if you click on this it will give you the share options, one of which is embed. Select it and then copy the code that is presented.

Now that we have the video code, we can go back to our video module and insert it. When you have your code inserted you should see the video appear in the module. This is looking great, but there are a few things that we need to do to make our full width slider with YouTube background. The first thing is, we need to make our video full width. To do this we need to go back into the row that we created. Open the row by clicking on the cog icon in the green tab. Click on the design tab at the top and go down to sizing. Slide the width slider all the way to the right, so that we have 100% width, and also type 100% into the max width box below. As you will see once you hit the check box and save the changes, your video is now the full width of the screen.

The next thing that we need to do is to make the video play automatically, and also for me personally, I would like to mute the video volume. To do this we need to add a little bit more code to the original embed code that we got from YouTube. To make the video auto play we need to add ?autoplay=1 after the YouTube video URL. To mute the sound, we need to add &mute=1 just after the auto-play code as shown in the image. The video will now play automatically when the page is loaded and the sound will be muted.

Now that we have completed the full width video background section, we need to create the carousel slider to go over the top of it. Under our video section, create a new section, again insert a row with one column and act the slider module to it. Add the slides that you wish to the slider and customize it how you like. For our demonstration today, we added a video element with title and text for the first slide. The video was added by copying the YouTube video URL and then inserting the video via URL, as opposed to uploading a video to the website. This method puts much less strain on the website and is much less likely to slow down your site. For the second slide we have used a simple text and content with a call to action button. For decoration we have put an overlay behind the text and change the color of the button slightly. You need to make sure that none of your slides has a background color, so that our full width video will show through once we move the slider on top of it. Once you have your slides in place, we need to go to the design tab of the slider module. At the bottom you will see a drop-down called ‘animation’, expand this and you will see the automatic animation switch, flip this to on and then set the desired time in milliseconds.

The slider section is now complete. What we need to do next is to move it up so that it appears on top of the full width video background section. To do this go into the slider module again, go over to the design tab and go down to ‘spacing’. Expand the spacing tab and you will see boxes to enter margin and padding settings. To move a slider up so that it sits on top of a video section, we will need to use some negative margin. For our example we used a setting of -60vh in the top margin box, this will move the slider up by 60% of the viewable height of whatever device it is being viewed on. You can fine tune this by using the arrows on the right hand side of the boxes. Adjust this as needed for your slider.

For safety we are going to go into the responsive, tablet and mobile settings for the margin, and adjust it so that it views correctly on both tablet and mobile versions. This should now be complete, you have now built a full width slider with YouTube video background with the divi theme..

For our readers, get any of the below courses for just $9.99 each. Just contact me with the course name and I'll email you the discount coupon.

Subscribe To Our YouTube Channel

4.5 million views on youtube

Learn Bootstrap

Bootstrap (no coding) Build Bootstrap Websites the Easy Way! rating

Test Out The Divi Theme

IT Certification Category (English)300x250

Elementor Page Builder

Pin It on Pinterest

Share This