Adding video to a website, whether it'southward on WordPress or non, is actually quite simple.  If you upload the video to a streaming provider such as YouTube or Vimeo, it tin can be every bit simple equally pasting the video's URL into a post or folio (for WordPress sites), or the video's provided embed script code into an html or PHP certificate (for WordPress AND non-Wordpress sites).

At that place are a few different methods to become video up and streaming on your website. In this article, we'll talk over pace-by-pace how to exercise it whether you're on WordPress or non (although WordPress tin make it a ton easier). This article will also talk over embedding video vs uploading videos, and why it'south just about ever a expert idea to embed and stream from a provider like YouTube or Vimeo.

Get-go, the question: should I embed or upload?

In this context, embed refers to pulling the video streaming information from some other provider, while uploading refers to streaming the video directly from the site's ain host. The answer is virtually certainly to embed, for multiple reasons:

  1. Uploading large video files to your website can not only accept forever, only can be denied past the hosting provider due to upload size and script timeout limits. Services like YouTube have super fast and efficient servers built specifically for uploading and housing video. Co-ordinate to fortunelords.com statistics for 2018, 300 hours of YouTube videos are uploaded every minute!
  2. Streaming video files that have been uploaded directly to your site are at the mercy of your host's bandwidth. If you have multiple people trying to watch your video at once, it can irksome, stall, and even crash your website due to exhausting the limited resources. Streaming services accept the capacity and bandwidth to allow seemingly unlimited video watching – v billion videos watched on YouTube per 24-hour interval according to fortunelords.com.
  3. Many different devices (desktops, mobile devices, tablets, etc…) take unlike means of interpreting and displaying video. I format, 1 codec, one size, i resolution does Not fit all, then your video might not work well for everyone, and might not piece of work at all for some. Streaming services accept your uploaded video and re-encode information technology to lots of dissimilar formats and resolutions, and serve that video to the user based on their viewing device and internet speed on the wing.
  4. Piracy – While it's possible to download videos off of YouTube and other streaming providers, information technology takes a little more than work and endeavor, and a fiddling bit of know-how. If the goal is to limit opportunity for someone to steal your video, employ a streaming provider. If y'all upload the video to your website and place it as-is on your site, the URL for that video is public and plain to see, and anyone could simply salve that URL (and past doing so download your video) to their local machine.

Then, unless you have a specific need for self-hosted video, apply a streaming service. However, in that location are some downsides to using providers like YouTube (that most people are ok with).  Things like:

  1. Ads – The quondam proverb goes "If you lot're not buying a production, yous ARE the product." YouTube generates revenue by advertising to users, and it does that through ads on the YouTube website, pre-roll ads on videos (that play before the video), and popup ads. Some of these ads volition likewise evidence upwards in embedded videos, so y'all need to be ok with that.  Video streaming service Vimeo has a paid / premium account option that gets rid of ads and allows protected streaming if they bother you too much.
  2. Related Videos – many embedded videos will show a thumbnail grid of related videos subsequently your video has completed. Because the algorithm that chooses those videos is based on contextual and relevancy data, this means that a video might show up that you don't want to bear witness up – such as a competitor's video about the same subject, or videos with content you lot don't desire associated with your brand.  There are some workarounds for this that we'll outline.

How to add YouTube video to a WordPress Website

Nosotros'll cover this outset since information technology'south and then like shooting fish in a barrel to implement. In a WordPress environment, adding a video has become every bit uncomplicated as pasting the video's URL into a post or folio.  WordPress has built-in embed functions that take a known provider'southward URL and catechumen it to a embedded video actor, without you having to exercise a thing.  WordPress supports this functionality out of the box for many pop providers such equally YouTube, Vimeo, Facebook, Twitter, and more than.  For a full list of supported sites, visit the WordPress Embed Codex.

To get the video's URL, simply find the video (nosotros'll apply YouTube as an example), and directly under the video there's a sub-card with a "share" push button. Click the share push and a popup will provide the URL.  Copy the URL and paste information technology into a WordPress mail or folio in the visual editor.  WordPress will supervene upon the URL with an embedded player. Example below:

This is pretty slick, merely the only downside is y'all don't get whatever options for how it should be sized, positioned, etc… and the mobile-responsiveness does go out a chip to be desired. Notwithstanding, in a pinch information technology'due south an first-class way to add together video.

Now, what if you want a little more control?  For that, hither at Ultra Graphics we use a plugin called Shortcodes Ultimate, which is an about universally loved plugin that has a TON of useful shortcodes for WordPress websites. For video, the Youtube advanced shortcode allows for a better responsive embedded video with options for the look and functionality of the actor. Remember when I mentioned above how related videos can be a bummer for some sites? This allows yous to turn them off by adding parameters to the YouTube URL.

To add a video with Shortcodes ultimate, inside the visual editor click the "insert shortcode" push button that appears above the editor toolbar.  And then click "YouTube Advanced" and fill up out the fields every bit necessary. You lot can gear up options like width and top (or arrive responsive to fill the width of it's container), manage the video controls, title bar, autoplay (note: NEVER autoplay videos with audio on a website, that's just rude), loop, related videos, branding, and more than. Information technology even wraps information technology in a couple of blocks of code to scale down in proportion without the ugly blackness bars at the top and lesser. As you can encounter, there are also options for other video services like Vimeo and Dailymotion.

The result volition look like a string of parameters wrapped in opening and closing brackets in the visual editor window, merely when the page is visited from the forepart end, an embedded role player volition appear. The example below was added using Shortcodes Ultimate, check out the difference:

Now what if you don't take/want WordPress or don't want to employ a shortcode?

If you need to be able to embed a video without the ease and simplicity of WordPress motorcar-functions, then you need the embed script.  The embed script for a video tin can be found in the same popup as the YouTube URL. To get the script, after you've clicked the share push button underneath the video, in the popup there is an "embed" push button. Click that and you'll get all the same another popup with some options.

The embed script commonly looks something like this:

<iframe src="https://www.youtube.com/embed/JlIeYOOOF74" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

There are additional settings you tin can choose similar whether or not to show related videos (yay!), and some of those similar championship and controls settings. One time you lot've pasted the iframe into your code, the video will appear in the familiar YouTube player. Getting the embedded code is different depending on the provider you choose, but most should provide a articulate way to copy and paste.

However, this iframe method will non be mobile responsive by default considering it has an explicit width and pinnacle set in the iframe parameters. To make it responsive, you have to practise a little more than code work that might not be easy for those not familiar with html and css.  Using a method that wraps the iframe code inside an html div, then applying CSS classes to both the div and the iframe allows the video to calibration proportionately down when the browser width changes for dissimilar devices. To do this, after you've pasted your iframe code into an html document, wrap information technology in a div with a class of "responsive-video" or something like that, instance below:

<div class="responsive-video"> <iframe width="560" height="315" src="https://world wide web.youtube.com/embed/JlIeYOOOF74" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> </div>

Then, in your style.css or other CSS stylesheet, add the following code (from ostraining.com):

.responsive-video {     overflow:hidden;     position:relative;     top:0;     padding-bottom:56.25%; } .video-responsive iframe {     height:100%;     width:100%;     position:absolute;     left:0;     height:0; }

For a quick explanation for what's happening hither, the wrapping div is set up to a position of relative, meaning we can position elements inside information technology relative to the parent div. Setting the height to 0 and the padding to 56.25%, nosotros're setting the proportion of the container to standard widescreen video with 16:nine ratio, which is what the majority of online videos are. So the top is prepare to zero, but the padding is pushing up from the lesser 56.25%, making the container responsive.

Side by side, the iframe inside the div is told to fill the height and width of the container (in this case, our div), have a position of absolute (which volition exist relative to the container, in this case our div), and have a superlative and left value of 0, meaning aligned to the top left.

Those 2 bits of lawmaking combined allow for a responsive video that will resize itself as the window changes width for devices.  Pretty cool huh? Check out the example using the responsive video embed below:

So now you know the departure betwixt embedding and uploading, which to use, and how to do embed on a WordPress or non-Wordpress site.

At present get out there and first creating and embedding some videos! If yous accept any questions, delight feel free to contact the states.

Dan Rickman

I piece of work with photography, analogy, design, marketing, SEM/SEO and animation/video. I love doing web and UI pattern as well every bit print, and have a passion for new and heady technology. Self proclaimed tech junkie, designer and marketer, SEO/SEM authorisation. View all posts by Daniel Rickman →