August 30, 2020

How to upload a video to WordPress without youtube?

WordPress Tutorials

the website architect

By

There can be many reasons why you could want to add video content to your website without the use of YouTube. Some reasons for hosting your video yourself may include:

  • It can help keep all your content organized by housing it in one place
  • Having an external resource being loaded onto your website like YouTube can be a contingency
  • No uncontrollable suggested videos at the end of the video
  • No ads playing before, during or at the end of the video

How to upload your video to WordPress without YouTube or embedding

To upload a video to WordPress without YouTube you must upload the video to your media library and then link to the video from the library. By default WordPress only allows .mpg, .mov, .wmv file types for security reasons. After uploading the video you can also use a builder element to link to the video to be placed on your page or post.

First upload your video to the media library by logging into your WordPress website and then on the left side menu find and click Media. The media section of your website is where all the pictures, icons, documents, and videos are stored.

media library in wordpress

Once on the Media page, you then either drag & drop your file onto the media area or you can click the “Add New” button to use the file explorer to find the video file on your computer.

One the file has been uploaded you can then click on it to get the videos file information. You’ll later need to have this popup open to copy and paste the file URL, located on the right side below the title, caption, and description.

video in wordpress panel

Just to note before continuing, You can copy the file URL by clicking on the Copy URL button under the URLs file location box. Optionally, you can also highlight the file location and use CTRL + C to copy the path. Keep this page open because you’ll be copying from it again later.

Next, go to the page or post you want to add your video to. For this next step, we are going to be adding custom HTML, which is added differently depending on what website builder you have.

custom html element in gutenberg
Adding the custom HTML element in Gutenberg editor

If you are using Gutenberg (the newest WP editor) then you’ll need to search for the Custom HTML element. With the WPBakery, Elementor, and Divi page builders searching for HTML in the add element area will do the trick to find what element you need.

Once you’ve added the Custom HTML element, copy and paste the code below into custom HTML area to set up your self-host video.

<video width="320" height="240" controls>
  <source src="path-to-video.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

You’ll then need to replace the path-to-video.mp4 in the HTML code with your video’s URL, found in the videos information popup as we had open from before.

If your file is a different video file type than .mp4, you will have to change the file type attribute in the HTML code. Find the type=”video/mp4″ and replace the mp4 with whatever file type you are trying to add.

MP4 is the most browser supported video file type, so I suggest using it to ensure the video works properly for all visitors viewing your video on your website.

After you updated the file path in the HTML code, save the page and you should be done! You should have a fully functioning video without the use of YouTube. If it doesn’t work, try to follow the steps closer to see what could have been done differently.

Here’s an example of how the video player will look like, without the use of YouTube embedding:

The styling of how the video player looks depends on what browser you are using. For example, Google Chrome’s video player will look different than Safari’s.

Should you embed videos without youtube?

Benefits of embedding without YouTube

As mentioned before, some advantages may include:

  • It can help keep all your content organized by housing it in one place
  • Having an external resource being loaded onto your website like YouTube can be a contingency
  • No uncontrollable suggested videos at the end of the video
  • No ads playing before, during or at the end of the video

Benefits of embedding with YouTube

  • The video will be more supported on all browsers
  • The video will load faster, and with less buffering
  • The video player will be more options
  • The YouTube video player interface is one that most people are already familiar with
  • You don’t have to use your own server space
  • Much faster to set up to embed, without having to edit or manipulate HTML code
  • With the video on YouTube, it has more potential for views and sharing

You can learn more about why not to embed videos yourself here.

Final verdict: YouTube vs self-hosted

You should host and embed your videos with YouTube. The pros of embedding with YouTube outweigh the cons by a landslide. YouTube videos are just so much more robust and detailed.

If you do decide to self-host and self-embed your videos, be sure to put in the measures to make them as supported as you can.

By

the website architect profile picture

I'm The Website Architect, just another web developer in Toronto, Canada. I'm passionate about Web Design, WordPress, and anything to do with websites. My goal is to make the Internet a more beautiful and usable place, one design choice and website at a time.