I want to share my journey about how to embed video with divi. I remember my early days in business web design. A smart researcher named Dr. James McQuivey suggests that one minute of video equals 1.8 million words. Video streaming now takes up 60 percent of global internet traffic.
I noticed a huge boost in my sales when I added videos. Fifty three percent of mobile users leave a page that takes more than three seconds to load. I had to learn the right methods fast. Therefore, I will teach you the exact steps.
- You must optimize videos so pages load fast.
- You can use standard modules or custom code.
- You must mute videos if you want them to play alone.
The Story Behind how to embed video with divi
First of all, I struggled a lot in the past. My business websites were very slow for my clients. I uploaded huge 120 megabyte video files straight from my phone. A huge mistake.
Later, I discovered the built in video module. I realized that Divi uses a standard HTML5 video element behind the scenes. This element is the new standard for the web. I felt so happy.
Gradually, I learned to balance high quality with small file sizes. I found out that worldwide internet speed is around 7 megabits per second. The United States averages around 18 megabits per second. I made my files much smaller to match these basic speeds.
At that time, I read many guides on this topic. I tested every feature on my own servers. I tracked the load times with special tools. My business grew fast.
Important Data And Video Formats
Additionally, you must choose the right video file format. You should upload your files in both MP4 and WebM formats. The MP4 format plays on almost all old and new web browsers. Divi lists the MP4 file first in the code so Apple devices can load it fast.
The WebM format offers much better file compression. It is an open source format built specifically for the web. Together, these two formats will support almost every web browser. A great combo.
You must define the correct MIME types on your server. You use a file tool like FileZilla to open your root folders. You edit the access file to add the video types. The files will then load fine.
Here is a quick look at the file types you can use. You will see how they compare in this chart. You can select the best option for your site. The right choice makes a big difference.
| Format | Best Use | Speed Quality |
| MP4 | Most browsers | High |
| WebM | Modern browsers | Highest compression |
Steps To Add Video With The Divi Video Module
First of all, you open your WordPress page. You click the purple button to use the visual builder. A new section and a row will appear on your screen. You are now ready.
You click the gray plus icon to open the module library. You search for the video module and you click it. The module settings will pop up right away. When you learn how to embed video with divi, you save time.
You can paste a link from YouTube or Vimeo in the box. Divi handles the rest of the hard work for you. Also, you can change the play button color to match your brand. A nice touch.
You can even upload your own image overlay for the video. The image will hide the video until the user clicks play. This action saves server power. Your visitors will love it.
Creating A YouTube Video Background
On top of that, you might want a video background. The native background setting only supports self hosted videos. You cannot simply paste a YouTube link in the default background settings. Not exactly simple.
However, I found a great trick to solve this issue. You can use a code module to create a fast background. You add a new row and you make the width 100 percent. You set the top and bottom padding to zero.
Then, you insert an iframe code from YouTube. You must add special parameters to the link. You add “autoplay=1” and “mute=1” to the end of the video link. The video will play fine.
Below is a table that shows the best link parameters. You should use these parameters for clean and quiet backgrounds. You will see the function of each small code. This setup looks very professional.
| Parameter | Function |
| autoplay=1 | Starts the video right away |
| mute=1 | Allows the video to play alone |
| controls=0 | Hides the player buttons |
Optimizing Video Size For Speed
Similarly, you must optimize your files before you upload them. I suggest you keep your background videos under 30 seconds. A shorter video cuts the file size in half. A very smart move.
Another part of how to embed video with divi involves file size. You should aim for a file size under 5 megabytes. You can use a free tool like Handbrake to compress your video files. I once reduced a 120 megabyte file down to 2.3 megabytes.
Plus, you should remove the audio track from background videos. Nobody likes loud music when they open a web page. This step will also reduce your total file size. Your site will load fast.
You can also crop the video to save more space. A cropped video uses fewer pixels on the screen. I cut a video by 40 percent for a local eye doctor. You should try this method.
Advanced Sliders And Overlays
Though you can use a single video, sliders are also great. The video slider module displays many videos in one clean space. Users can scroll through them one at a time. Very easy navigation.
You can add a custom image overlay for your videos. The video will adjust to the size of the column. Most modern videos use a 16:9 aspect ratio. You should remember this rule.
Therefore, your overlay image should match that exact ratio. If your row is 1080 pixels wide, your image should be 1080 by 608 pixels. This specific size keeps everything sharp and clean. It looks amazing.
You can also choose to show a thumbnail track. The thumbnails sit below the main video player. Users click the small images to switch the videos. A great feature.
Autoplay And Mute Settings
Finally, you must understand how modern web browsers work. Major browsers like Google Chrome and Safari have very strict rules. They will block videos that play sound automatically. A massive shift.
If you want your video to play by itself, you must mute it. This strict rule improves the user experience and saves data. You must respect the rules of the web. I agree with this rule.
I learned this vital lesson the hard way. I used the code “autoplay=1” but the video did not play. Later, I added “mute=1” and it worked perfectly. I was very happy.
On the contrary, some mobile phones still block all automatic videos. This action saves the phone battery for the user. You cannot bypass this hardware block. You must accept it.
FAQ’s
Is a background video bad for search engine optimization?
Not always. Problems only happen when your video slows down the page. You must optimize the file size and keep it very small. A fast page ranks high.
Should I use self hosted files or YouTube?
You should use YouTube if you want a fast and easy setup. On the contrary, you should use self hosted MP4 files if you want maximum speed. Both options are good.
Why do some videos fail on mobile phones?
Many mobile phones turn off automatic video playback to save battery. Apple devices block it if low power mode is active. You cannot force the video to play.
How can I change the play icon color?
You open the module settings and you go to the design tab. You will find an option to pick a new color from your palette. This feature helps match your brand style.
Can I hide the video controls?
Yes, you can hide them easily. You add “controls=0” to your video link parameters. A clean player looks much better on professional sites.
How do I loop a video forever?
You add “loop=1” and “playlist=VIDEO_ID” to your link. The video will repeat over and over again. A looped background looks very cool.
Conclusion On how to embed video with divi
In the end, you have learned the best methods for business sites. You know exactly how to embed video with divi. You can create amazing pages that load fast and look great. A real win.
I strongly advise you to compress your files before you upload them. You will save bandwidth and you will keep your customers happy. You will also rank better on search engines. Your business will grow.
You should test your pages on a mobile phone to ensure everything works. I wish you the best of luck with your web design projects. Go build great sites today. Enjoy the process.