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

There are a few dissimilar methods to get video upward and streaming on your website. In this commodity, we'll discuss step-past-pace how to do it whether you're on WordPress or not (although WordPress tin can make information technology a ton easier). This article will also discuss embedding video vs uploading videos, and why it's just well-nigh always a good idea to embed and stream from a provider like YouTube or Vimeo.

Beginning, the question: should I embed or upload?

In this context, embed refers to pulling the video streaming data from another provider, while uploading refers to streaming the video straight from the site'due south own host. The answer is virtually certainly to embed, for multiple reasons:

  1. Uploading large video files to your website tin not merely accept forever, but can be denied by 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. According 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 yous have multiple people trying to watch your video at once, it tin can slow, stall, and even crash your website due to exhausting the limited resources. Streaming services have the capacity and bandwidth to let seemingly unlimited video watching – v billion videos watched on YouTube per day according to fortunelords.com.
  3. Many different devices (desktops, mobile devices, tablets, etc…) accept different ways of interpreting and displaying video. One format, 1 codec, one size, 1 resolution does Non fit all, and so your video might not piece of work well for everyone, and might not piece of work at all for some. Streaming services take your uploaded video and re-encode it to lots of different formats and resolutions, and serve that video to the user based on their viewing device and internet speed on the fly.
  4. Piracy – While information technology's possible to download videos off of YouTube and other streaming providers, it takes a little more piece of work and endeavour, and a lilliputian bit of know-how. If the goal is to limit opportunity for someone to steal your video, use a streaming provider. If you upload the video to your website and identify it as-is on your site, the URL for that video is public and plain to see, and anyone could merely save that URL (and by doing so download your video) to their local machine.

And so, unless you have a specific need for self-hosted video, use a streaming service. However, there are some downsides to using providers similar YouTube (that most people are ok with).  Things like:

  1. Ads – The old proverb goes "If you're not buying a product, you ARE the production." YouTube generates revenue by advertising to users, and information technology does that through ads on the YouTube website, pre-scroll ads on videos (that play earlier the video), and popup ads. Some of these ads will also show up in embedded videos, and so y'all need to be ok with that.  Video streaming service Vimeo has a paid / premium account pick that gets rid of ads and allows protected streaming if they bother you lot also much.
  2. Related Videos – many embedded videos will evidence a thumbnail grid of related videos after your video has completed. Because the algorithm that chooses those videos is based on contextual and relevancy information, this means that a video might prove upwardly that you don't desire to evidence up – such as a competitor'south video about the same subject, or videos with content you don't want associated with your brand.  In that location are some workarounds for this that nosotros'll outline.

How to add together YouTube video to a WordPress Website

Nosotros'll cover this offset since it'south so piece of cake to implement. In a WordPress environment, adding a video has become as elementary as pasting the video's URL into a mail or page.  WordPress has built-in embed functions that take a known provider's URL and convert information technology to a embedded video actor, without you having to practice a matter.  WordPress supports this functionality out of the box for many pop providers such as YouTube, Vimeo, Facebook, Twitter, and more.  For a full list of supported sites, visit the WordPress Embed Codex.

To go the video's URL, just find the video (we'll use YouTube equally an example), and straight nether the video there'due south a sub-menu with a "share" push button. Click the share button and a popup volition provide the URL.  Re-create the URL and paste it into a WordPress post or page in the visual editor.  WordPress volition replace the URL with an embedded thespian. Example beneath:

This is pretty slick, just the only downside is you don't go any options for how it should be sized, positioned, etc… and the mobile-responsiveness does leave a bit to be desired. All the same, in a compression it's an excellent way to add video.

At present, what if you want a petty more control?  For that, here at Ultra Graphics we use a plugin called Shortcodes Ultimate, which is an almost universally loved plugin that has a TON of useful shortcodes for WordPress websites. For video, the Youtube avant-garde shortcode allows for a improve responsive embedded video with options for the await and functionality of the role player. Remember when I mentioned above how related videos tin be a bummer for some sites? This allows you to turn them off by calculation parameters to the YouTube URL.

To add a video with Shortcodes ultimate, within the visual editor click the "insert shortcode" push that appears above the editor toolbar.  Then click "YouTube Avant-garde" and fill out the fields equally necessary. You can set options similar width and height (or make it 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 simply rude), loop, related videos, branding, and more. It even wraps it in a couple of blocks of code to calibration down in proportion without the ugly blackness bars at the top and bottom. Every bit you can see, there are also options for other video services like Vimeo and Dailymotion.

The event will look like a string of parameters wrapped in opening and closing brackets in the visual editor window, simply when the folio is visited from the front end end, an embedded player will appear. The instance below was added using Shortcodes Ultimate, check out the difference:

At present what if you lot don't have/want WordPress or don't want to utilise a shortcode?

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

The embed script usually looks something like this:

<iframe src="https://world wide web.youtube.com/embed/JlIeYOOOF74" width="560" acme="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

There are boosted settings you can choose similar whether or not to show related videos (yay!), and some of those similar championship and controls settings. Once yous'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 yous cull, just about should provide a articulate way to copy and paste.

However, this iframe method will non be mobile responsive by default because information technology has an explicit width and height set in the iframe parameters. To brand it responsive, you accept to practise a little more than code work that might not be easy for those non familiar with html and css.  Using a method that wraps the iframe code within 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 certificate, wrap it in a div with a form of "responsive-video" or something similar that, example beneath:

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

And then, in your style.css or other CSS stylesheet, add the following lawmaking (from ostraining.com):

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

For a quick explanation for what's happening hither, the wrapping div is fix to a position of relative, meaning we tin position elements within information technology relative to the parent div. Setting the superlative to 0 and the padding to 56.25%, nosotros're setting the proportion of the container to standard widescreen video with sixteen:9 ratio, which is what the bulk of online videos are. And so the height is set to zip, but the padding is pushing up from the bottom 56.25%, making the container responsive.

Next, the iframe within the div is told to fill the pinnacle and width of the container (in this case, our div), have a position of absolute (which volition be relative to the container, in this case our div), and accept a summit and left value of 0, meaning aligned to the top left.

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

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

At present leave in that location and kickoff creating and embedding some videos! If yous accept whatsoever questions, please experience complimentary to contact the states.

Dan Rickman

I work with photography, analogy, pattern, marketing, SEM/SEO and animation/video. I dearest doing web and UI blueprint too as print, and have a passion for new and exciting applied science. Cocky proclaimed tech junkie, designer and marketer, SEO/SEM authorization. View all posts past Daniel Rickman →