Tag: twitter bootstrap

Picture of man coding on mac computer Video Tutorials

How To Add Video To Your Website

After you’ve finished producing your video, it’s important to add it to high traffic areas so you can benefit from all those views. Don’t worry, coding shouldn’t be scary, it’s actually a lot of fun and kinda cool once you get a little familiar with it.

What you’ll need:

  • Access to your website in a location where it’s possible to add code.
  • If you have an HTML website you’ll need a text editor, this can be Adobe Dreamweaver, NotePad++.
  • Special considerations should be made for custom websites or CMS systems. Sometimes these can strip code or block certain code from your site.
  • In the case of modern websites, most of them use Twitters Bootstrap, which is a mobile styling code library. The latest versions of WordPress and Joomla should have this code installed.

Where to Start:

First lets determine what type of website you have? Do you have a CMS? This is typically a site that allows you to post articles and make updates from a back end portal. If your website is basic HTML then you’ll need access to an FTP server that will allow you make changes to the code and place the new files on the server. In this example we’re going to assume you know where to update your website.

Fixed Width & Height Video Embed

The simplest way to embed a video into your website is to upload it to a video streaming service like YouTube. Using this method you’ll have a fixed pixel width and height video displayed on your website. Follow the steps below.

  1. Navigate to the YouTube or Facebook video you’d like to place on your site in a new tab in your browser.
  2. For YouTube click the “Share” button.
    Image of the YoutTube Share Button
  3. Once the share dialog box appears click “Embed”
    How to embed youtube video
  4. Here you’ll be provide an iFrame code you’ll need to copy and paste into the code portion of your website. This will not work with a visual or wysiwyg editor. I’ll explain more in the next step.
    How to embed youtube video in your website.
  5. This is where we copy the code into our website. Your code should look similar to this.
    <iframe width="560" height="315" src="https://www.youtube.com/embed/QkrNSKlE_9s" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  6. Now place this code in the “text editor” part of your website. If you’re working with Joomla or WordPress switch to “HTML or Text” view. Locate the place you’d like to put the video in the code. If this becomes a problem, follow the actual text, if you’d like the video to show after a particular paragraph simply find the end of that paragraph and type a <br/> after the period. Then copy your code from above and paste it there. With a little luck, your video should look just like ours does below.

Adjustable Size Mobile Video Embeds

This is our favorite type of video embed. If you look at the video above, you’ll notice that it doesn’t fit the full width of your device. It might squeeze into the size of the screen when it’s small but if the screen grows to anything larger than it’s fixed width and height the video won’t increase in size with the screen.

We think this simply isn’t fair! Why not use as much real-estate as possible.

So the simple fix is Twitter’s Bootstrap responsive video embeds. You’ll need to be a little more comfortable with coding but the idea is very similar to the above method. Also make sure you have at least Bootstrap 3.0 for this to work. In most cases you should be able to add this code to your website and it will either work, or it will display smaller than full width, so don’t worry you won’t break anything if you don’t have bootstrap.

Step 1 – Find the src code from the youtube share iframe for the video you’d like to embed. In the example above you’ll see it’s src="https://www.youtube.com/embed/QkrNSKlE_9s"save that because we’ll need it in the next step.

Step 2 – Copy the twitter bootstrap responsive 16 x 9 embed code we’ve listed below. It’s important to place this code after any previous div tags in your article. Usually at the very end or very beginning of your article works. In our case we’re placing it at the bottom.

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="___PLACE YOUR YOUTUBE SRC HERE____" allowfullscreen></iframe>
</div>

Step 3 -Place your source code from your video between the ” ” in the code above. That’s it, you’re done. If it works correctly your video should display like the video below. Experiment with different size screens so you can see the difference it makes. This code should work for nearly any embed video code, vemeo, facebook, ect.

Summary

Let us know in the comments below if this method helped explain how to add a video to your website. If you’re the type that’s just too busy to mess with the squinty eye’d coding be sure to get in touch and our website developers would be happy to help you get your video up and running!

Click here to contact us today!