Webflow Problem Uploading Multiple Background Videos on Site

Video is a powerful tool. If an image is worth a thousand words then a minute of video is worth 1.8 million words (At least that is what researcher Dr. James McQuivey suggests). Video is an effective marketing tool and, when done right, an instrument for beautiful design.

Adding a video to your website is easy with Divi. The video and video slider modules allow yous to add third party hosted videos like youtube and vimeo by simply entering the video url. You tin can even add your own custom videos in both mp4 and webm formats for maximum browser compatibility. To top it off, Divi gives you the option of styling your videos with paradigm overlays and play buttons to help match the blueprint of your site.

In add-on to embedding videos on your page, Divi also provides a simple solution for adding background videos. Currently, when you build a site with the Divi builder, each department, row, cavalcade, and xx out of 37 modules have background video capability.

For nigh people, using Video inside Divi is equally easy as inserting the link to the YouTube or Vimeo video that you lot want and seeing it appear on your mail or page. Just in this post we're going to talk about how and why Divi does what it does with video so that you are fully equipped for whatsoever special apply cases, unique styles, or creative experiments you might want to run.

In this guide we're going to hash out…

behind the scenes workings of the Video Module and Video Slider Module so yous tin use it more than effectively.
the difference between self-hosting your videos and using a third political party host.
some tips nearly optimizing your videos for the web.
best practices for Video Backgrounds.
a full general guide for choosing video dimensions.
and a few helpful hacks for background videos.

Permit'southward go started.

Exploring the Video Module

The video module allows you to embed videos to your page from merely well-nigh whatever source. Divi'due south documentation on the video module explains all the features and how to add together a video to your page. Simply for this post, I'1000 going to dig a little deeper.

Adding a Self Hosted Video to the Video Module

To add a self-hosted video with the video module you must upload a video or add together a url to the video file within the Video settings. And, you must add your video in two file formats.

And that is all you lot really demand to practise. Simple enough.

However, behind the scenes, Divi is using the HTML5 video element to brandish the video. When you choose to add a self-hosted video or upload your own video using the mp4 and webm formats, the structure of the code Divi deploys looks something like the following:

<video controls>   <source src="motion picture.mp4" type="video/mp4">   <source src="motion-picture show.webm" blazon="video/webm"> Error loading this resources </video>

Here are a few things I want to betoken out nearly what this code is doing:

Notice the controls attribute within the <video> tag. This tells the video to display the controls. Elementary enough.
Notice the two <source> tags inside the opening and endmost <video> tags. The sources consist of video files. The first is an mp4 and the second is a webm file format. Both are necessary for maximum browser support. The order is important every bit well. You want the browser to see the mp4 first since it is the most universally supported. I'll discuss more on these formats later on.
The line that reads "Error loading this resource" will be displayed if the kickoff two formats don't get recognized.
What you tin't see is that Divi has styled this <video> tag and given it a width of 100% to make it responsive then your video volition adjust to the width of the cavalcade it sits in.

This HTML5 video element is growing as the new standard style to evidence video on the web. Thankfully, Divi takes care of this for us.

Cocky-Hosted Video Epitome Overlay

Aside from the option to add your videos to the Video Module, Divi also allows you to add a custom overlay image for your video.

If you choose to add an overlay image to your self-hosted video, you must upload your own. The option to generate the image from video merely applies to third party hosted video URLs like Youtube and Vimeo.

Because the epitome volition become the size of the video and because the video volition adapt to the size of the cavalcade in which it sits, it is important to choose the right size image. Videos from Youtube, Vimeo, and nigh other formats usually have an aspect ratio of 16:9. So if you lot have your max content width set up to Divi's default of 1080px, so following the 16:9 attribute ratio your video will have the dimensions of 1080×608. Therefore your overlay image should be 1080×608 pixels.

The Play Button

Once your image has been set, Divi will automatically apply a custom play push button. You tin even alter the color of the push if you desire in the Video Setting under the Design tab.

One time the user clicks on the overlay with the custom play button, the overlay and button will disappear and the video underneath the overlay will kickoff to play automatically.

Adding a Third Party Hosted Video URL

The most common method for adding a video to the Video Module is to merely add the URL of a video hosted by a 3rd party like Youtube or Vimeo. So instead of adding the two video formats like you would do for self-hosted videos, you lot would merely add a URL in the pinnacle background input bar.

Behind the scenes, Divi adds a fluid width wrapper div and embeds an iframe displaying the video. This iframe is the aforementioned equally you would go from youtube straight. Here is an example of what the lawmaking looks like when adding a youtube video with the video module:

<div class="fluid-width-video-wrapper" style="padding-height: 56.2963%;"> <iframe src="https://www.youtube.com/embed/Nimdf3Zeayk?autoplay=1&amp;amp;characteristic=oembed&amp;amp;wmode=opaque" frameborder="0" allowfullscreen="" id="fitvid0"> </iframe> </div>

The div with the course "fluid-width-video-wrapper" wraps effectually the iframe and gives it a width of 100% so that information technology will adapt to the width of its container making it responsive.

If you choose to add an overlay prototype, you can choose to upload your ain or, to salve a little headache, you tin simply click "generate from video" and Divi will automatically apply an overlay image taken from the video. You can too choose to customize the play button.

Exploring the Video Slider Module

The video slider works very like to the video module in the way that videos are deployed on a webpage, except now the videos are in a slider. This is a convenient way to display videos in one place then your users tin can simply scroll through a grouping of videos 1 at a time. For more details on the Video Slider Module options, y'all tin can visit the documentation page.

1 of my favorite elements of the video slider is the thumbnail rails you lot can use to control the slides. It is both convenient and engaging.

Y'all can even customize colors of the slider controls from the module settings including the Thumbnail Overlay Color.

The thumbnail images will remain the size of the original image yous upload then exist careful not to upload a agglomeration of big images in your slider equally this could slow downwardly your site. Besides, the thumbnails cannot be generated automatically from the video. You must upload those yourself.

The thumbnails follow an aspect ratio of four:3 so in order to adjust your sixteen:9 slider images, it volition blow upwards and cutting off the correct and left of the epitome in order to cover the entire space.

Design Tip: One pull a fast one on you could do to cut down on file size and keep your thumbnails from cutting off role of the image is to customize your thumbnails to be 253×190 pixels (a four:3 aspect ratio) and select the option to hide display image overlays on principal video. That way your overlay images volition just exist used for thumbnails and therefore won't need to exist any bigger to adjust for the main video size.

4 Important Tips for Self-Hosting Your Videos

Use a CDN. If you are thinking nearly adding your videos via the WordPress Media Library, think again. Although it is possible to host videos on your own WordPress install on your ain server, you will probably see some limitations on bandwidth, file size, storage space, etc… which may cause your site'southward load time to endure and outcome in lagging video streaming. I would consider hosting your videos on an external service like Amazons3. This will assist with folio load times. Plus, some of these providers offer a level of security to keep people from downloading your videos (or at least brand information technology more difficult to download).
Optimize File for the Web. Videos take upward a lot of bandwidth, specially when you are using a large video groundwork. You lot will need to be careful not to overload your folio. There are a number of factors to consider if you want to properly optimize your video for the spider web. Here is a helpful equation to consider:
file size = bitrate(kilobits per second) x elapsing (length of video in seconds)

So, if desire to get a smaller file size, you will demand to cut down on duration (the video length) and/or bitrate (the number of kilobits per second that is transmitted). The bitrate should e'er be lower than the the user's connection speed. Considering the worldwide internet speed is effectually vii Mbps (The states is around 18 Mbps), you will want to go along the bitrate well beneath that to avoid a disruption in streaming.

You lot don't have to practise this all by yourself. There are some great free tools out there to help yous with video compression like Handbrake.

I propose reading "five Best Ways to Reduce Video Size for Faster Loading" if yous want to learn more almost optimizing your videos for the spider web. There are some great resources listed and a nifty caption on how to use Handbrake.
Add Correct File Formats.
Equally I mentioned before, if you lot are cocky-hosting your videos (not relying on a 3rd party to host it for you like Youtube), you will need to add your video in both mp4 and webm formats.
Mp4 is currently the most widely supported format because information technology notwithstanding plays some of the one-time browsers using wink and information technology is the standard for mobile browser support. Divi lists mp4 first in the code so iOS devices can recognize the file immediately.

Webm is the second most supported format. It was built for the web and it seems to be here to stay. It produces high quality streaming with splendid compression. And it is open up source.

Combined, these two offer support for most web browsers including mobile.

A great free conversion tool would exist the VLC media player.
Define MIME Types: In gild for the WEBM video format to piece of work in all browsers, your server must accept the correct MIME types designated. You can larn more near using .htaccess to ascertain MIME types here. If yous notice your videos are non playing in sure browsers, and so this is likely the reason.To add MIME types to your .htaccess file, utilize a FTP customer (similar FileZilla) to admission your WordPress root files. There you should find your .htaccess file. Open the file in a text editor. Beneath the line that says "#END WordPress" add the following:
AddType video/mp4 .mp4 .m4v
AddType video/ogg .ogv
AddType video/webm .webm

Then save the file. Now your video formats will exist recognized on all browsers.

Hosting with Third Political party Platforms (Youtube and Vimeo)

If you find that converting and compressing your own videos is just too much work, y'all tin e'er let a third political party do the work for you.

If you don't know anything about video, I suggest taking this route. If y'all aren't crazy well-nigh the limitations of youtube or vimeo free, y'all tin bite the bullet for Vimeo Pro. It may be worth the headache in the long run. What y'all don't want is to put a video on your site that slows information technology down or looks poorly. It'due south merely non worth it.

Third Party Video Platforms supported by the Video and Video Slider Modules

If you want to employ the Video and Video Slider Modules to add your third party videos, you can utilize the post-obit popular platforms:

Youtube
Vimeo
Dailymotion

How to Add Third Political party Videos Using Divi

To add together a video from whatever of these platforms, y'all will need to go the their site to get the share link.

So you can paste that into the Video or Video Slider Module.

Click the "Generate from Video" button to add an imag overlay. Or upload one of your own.

Salve Settings. And that'due south it.

Keep in mind that Divi is built on WordPress and then yous can always embed videos from third party platforms using their suggested embed codes without using the Video Module. Only add a text module and input the embed code inside the content box.

You lot may demand to customize the width and height for your embed to accommodate for a responsive layout.

What about Wistia?

Wistia is a powerful platform that a lot of people use but unfortunately it does not play well with Divi modules currently. You can, however, embed Wistia using the embed code they provide.

Pasting that code in a content section on your Divi site will show the video.

Y'all can even paste the code into the content department of the slider module to add a wistia video as one of your slides. However, you lot volition need to suit some CSS to go it looking the way you want.

Using Video Backgrounds with Divi

Should You Even Use a Video Background?

Before we get into the details of video backgrounds, information technology is of import that yous honestly ask yourself whether or non you should apply one at all. Don't get me incorrect, I love a good video groundwork. Simply sometimes it just doesn't brand sense. Brand no mistake near information technology, videos will boring your site down and tin can be distracting to your content. So never choose a video background over a more constructive image. Yous site may be meliorate without one.

Just, there are times when video is a better solution than an image. When done right, a video background can bring your content to life. So, make your video purposeful and make it count.

Video Groundwork Capabilities within Divi

You can add a video background most anywhere you want using the Divi Architect. You lot can add together a video background to each Section, Row, and Cavalcade. You can even add together video backgrounds to nearly modules.
Here are the modules that support video backgrounds.

Fullwidth Header (works on fullscreen option likewise)
Fullwidth Carte du jour
Fullwidth Portfolio
Fullwidth Post Slider (When non using the featured image, you tin can use a video background to serve equally the groundwork for all slides)
Fullwidth Mail service Title
Fullwidth Slider (works with individual slides)
Audio module
Bar Counters
Blurb Module – just make sure to give the module some padding.
Call to activity module
Countdown Timer
Email Optin
Filterable portfolio
Login Module
Number Counter Module
Person Module
Portfolio Settings
Post Slider (When non using the featured paradigm, you tin can apply a video background to serve as the groundwork for all slides)
Post Title
Pricing table (You lot can set a video background for the module and for different tables individually)
Slider (for backgrounds of private slides merely)
Tabs (for both module background and individual tabs)
Testimonial
Text
Toggle

Stock Video Libraries

The difficult part about adding a video background to your site is finding the right image and making sure it is the right size. Thankfully, yous don't have to create your ain custom video backgrounds. There are royalty free stock video libraries available that may work well for your website. If you are looking for some free video footage, some good places to showtime would be videvo, coverr, or videezy. If you are looking for meliorate quaility paid versions, you can check out videohive, videoblocks, or pond5. Some of these sites use video backgrounds really well if you are looking for some inspiration.

How to Add a Video Groundwork to Your Page

Later on yous find (or create) the right video, things go actually piece of cake. To add a video background to your Divi webpage, simply deploy the visual builder and find the section where you want to add the video and click on Section Settings icon.

Under the content tab, click the background image icon/tab under the Background options. If you have a self-hosted video, enter both mp4 and webm formats. So enter the dimensions of the video then Divi knows how to size it properly.

Now go to the background image tab and add together a groundwork image that would serve as a adept fallback for mobile devices.

Then save settings. It's that unproblematic.

If you were planning on using one of your videos that you now host on youtube (or vimeo) as a background, this is not currently possible within the Divi builder. Remember that yous need these videos in the correct formats to show on all browsers. Still, you can download that Youtube video (if it belongs to you) and catechumen information technology to mp4 and webm formats to utilize on your groundwork.

Background Design Tip: Using a Video Background for Your Fullwidth Mail service Slider

If yous are looking for a artistic way to showcase your featured posts on your weblog page, you tin can add together a video background to your post slider. Let me evidence you what I hateful.

Go to your page using the Visual Builder and add a Fullwidth Department to the top of the page with a fullwidth post slider module.

Under the Content tab, nether Testify Featured Image, select "NO".

Then under the Background department, select the video background tab and add both formats of your video, along with the dimensions.

It is as well a practiced thought to add a background prototype as a fallback for mobile devices that can't display video backgrounds.

That's it.

Now the user tin scroll through your featured post slider with a cool groundwork video. Only make sure the video groundwork is subtle enough non to distract from the content.

Best Practices for Video Backgrounds

With all the possibilities afforded by video backgrounds, I thought it best to include some general best practices.

Ever include a background image as a fallback for mobile. Mobile devices won't autoplay large videos. This is why Divi shows the fallback paradigm by default on mobile devices.
Use a small video. For background videos, you can become away with 720p resolution since the background is a second thought to the content/text overlaying the video. The quality won't suffer and so much that you would notice.
Consider an overlay. Adding a semi-transparent color overlay on summit of the video will aid you get away with a smaller file size because it volition hibernate the messy details of a video with less quality. Plus it volition brand your text stand out more.
Don't utilise sound. You don't demand sound for video backgrounds so take it out. This volition cut down on filesize.
Use both mp4 and webm formats for cross browser support.

Break Video?

You may have seen this selection listed in the settings nether background options.

In some cases, the video may conflict with some other video background playing audio. This option helps to keep but one video sound playing at a time.

Divi Video Hacks

There are a few more avant-garde video and video background customizations that you may observe helpful. Hither are a few.

Resize your Play Button

If yous would like to change the size of your play button, go to the Video Module settings, under the Advanced tab, and enter the following custom CSS in the box labeled "Video Icon":

Font-size: 10rem; Line-height: 10rem; Margin-tiptop: -5rem; Margin-left: -5rem;

You can adjust the values to the size y'all want. Just make sure that the font-size and line-height always stay the aforementioned and the margin-top and margin-bottom always remain a negative value that is half of the font-size. For example, if y'all wanted to get in smaller, the values would be.

Font-size: 4rem; Line-height: 4rem; Margin-pinnacle: -2rem; Margin-left: -2rem;

How to Finish the Video Groundwork from Pausing on Click

In some cases, you lot may find that clicking on your video background will pause the video. You tin can disable this feature past add the following Custom CSS to your mode.css file in your kid theme (or in theme customizer > Boosted CSS):

.et_pb_section_video_bg video { pointer-events: none; }

How to Stop Video Groundwork from Looping

You may have remembered this tip from one of our older posts. By default, the video groundwork will continue to loop. This is on purpose because that is normally what y'all desire a video background to do. But if you only want to show your background video once so quit, you tin can disable the loop action by going to Divi > Theme Options > Integration and enter the following in the:

<script> (function($) {     $(document).ready(part() {         $('.no-loop .et_pb_section_video_bg').each(function() {             $(this).notice('video').removeAttr('loop');         });     }); })(jQuery); </script>

Video Dimensions for Divi

I didn't want to end the post without mentioning video dimensions. In that location is no firm rule on what dimensions to employ considering all videos and websites are unlike. A 720p (1280×720) video may expect swell stretched on a 1920×1080 screen while some other will look horrible. When deciding on the dimensions or resolution of a video for your site, you lot tin follow the epitome dimensions for Divi'south column layouts and modules as a general guideline. Simply put, your video should exist closest to the width of the cavalcade it sits in without going nether. So if you accept a fullwidth column that has a max width of 1080px, and then you lot shouldn't demand a video with a resolution greater than 720p (1280×720). Still, if you lot are using a video background that spans the total width of your browser, you may need to get upward to 1080p (1920×1080) so that when information technology spans the total width of the browser on larger monitors, it doesn't look grainy.

If you are going to rely on a third party video professional to gear up your videos for the spider web, here is a list of recommended video resolutions for youtube.

2160p: 3840×2160
1440p: 2560×1440
1080p: 1920×1080
720p: 1280×720
480p: 854×480
360p: 640×360
240p: 426×240

These follow the 16:9 attribute ratio and then that you won't meet the black bars on the sides of the video.

Vimeo also gives guidelines for videos. I especially similar Vimeo's post on video compression nuts.

Final Thoughts

Videos will continue to be an integral part of our online feel for a long time. Then it is important that y'all know what you are doing when adding videos to your website. If you exercise determine to use video in your website, Divi makes the process extremely unproblematic, providing a cross browser solution for self-hosted videos and a convenient solution for 3rd party embeds. But Divi tin can't do everything for you. Hopefully this post will help you in the process of selecting the right video and preparing it for the web.

I await frontward to hearing from you in the comments.

ibarrautonce.blogspot.com

Source: https://www.elegantthemes.com/blog/divi-resources/ultimate-guide-to-divi-video