How to Add Videos to Your Website

Introduction

You have a great website, but it still needs something. Adding videos is easy to make your site more exciting and engaging. The good news is that adding videos is fairly simple. This guide will walk you through the steps of adding a video to your WordPress and Shopify websites. Having videos on your site no doubt helps increase your audience’s conversion rate.

Get an account

If you want to add a video to your website, you first need to get an account on a video hosting site. Adding videos to your site directly often negatively impacts the site speed, which you don’t want. You can use YouTube, Vimeo, or Wistia for this. YouTube is the most popular one. Once you’ve created an account with one of these providers and uploaded your video to it (more on how to do this later), then you’ll be able to embed your video into any page on your website.

The next step is finding the code you’ll need to embed your video into your website.

Upload your video 

Upload your video to a video hosting site, like YouTube, Vimeo, or Wistia.

YouTube, you can upload your video using YouTube Studio: 

1. Click on your name in the right corner of YouTube.
2. In the drop-down menu, select “YouTube Studio”
3. Select “UPLOAD VIDEOS”
4. Follow YouTube’s steps from there. 

Other video-sharing platforms have a similar process. For step-by-step guidance, search for “how to upload videos to [VIDEO SHARING WEBSITE]. “

Copy your embed code 

Now that you’ve uploaded your video to YouTube, Vimeo, Wistia, or some other video-sharing website, it’s time to copy and paste the embed code into your web page.

To do this: 

• Go to the Video Manager section of your account on that site.
• Click Embed or Share under “Embed Code.” This will open up a new window with all of your embed options for that particular video—it may be an HTML5 code or another type of code, depending on which platform you used to upload it

Edit the HTML of your website’s template 

• To add a video player to your website, you’ll need to edit the HTML of its template. This is the code that tells your site’s layout what to look like and how it should act.
• To do this, you’ll need a web editor that lets you make changes in HTML.

There are many free editors available online: WYSIWYG (what-you-see-is-what-you-get) editors such as Dreamweaver and Microsoft Expression Web allow users with little knowledge of coding languages—like me!—to modify their templates easily. Alternatively, if you’re comfortable with coding languages like PHP or CSS, then there are plenty of open-source content management systems (CMSs) out there that allow for easy editing through a text editor but provide prebuilt templates for those who know how to work with them; one popular option is WordPress (which powers this blog).

Resize and reposition the video player

You can also use CSS to resize and reposition your video player. Just make sure that the video player is visible on mobile devices by setting overflow: hidden; on the body tag, or adding a height value to the body element in your style sheet.

• Resize/position: The play/pause button has no direct impact on what happens when you click it; it simply changes how the controls are displayed (or not). When playing a live stream, for example, you might want to hide all of these buttons so that viewers don’t accidentally change anything during an important part of the show.
• By default, YouTube displays six buttons at once—play/pause; volume up/down; mute sound; full-screen mode toggle—and will place them wherever they’ll fit within its container div . To resize or reposition this control panel as needed (for instance, if there isn’t enough room for all six buttons), use two CSS classes:  class=”yt-uix-toolbar” and class=”yt-uix-button yt-uix-button-fullscreen” , respectively.

Adding Videos to WordPress Webites

https://youtu.be/oYTgG_3B7QA

This depends on which WordPress editor you’re using, whether Elementor or WordPress native editor. 

On the native editor, follow these steps to add a video:

1. Click on the plus “+” Icon
2. Add a block and choose from YouTube, Video, or Embed – depending on where the video is sourced 
3. If you choose “YouTube”, copy and paste the URL in the embed address box 
4. Take similar steps if you want to use another source

If your WordPress editor is Elementor: 

1. Click on the “Video” tile on the right side of the relevant page you want to load the video to; and
2. Copy and paste the YouTube URL in the URL section on the left side of the page. 

You can also adjust the size and position of the player by clicking on “Edit” in the top menu bar. Once you’re happy with how things look, just hit “Save” at the top of this box.

Shopify Sites

See the video tutorial below on embedding a video on your Shopify website. There are two ways to embed a video:

1. Add video to your blog posts or pages; or
2. Add video to your product, which depends on your Shopify them

https://youtu.be/GBfUYJJE57w

Adding video to Shopify website blog posts or page

1. Upload the video to your Youtube channel
2. Go to your video page on Youtube, and click on “Share”
3. Choose “Embed” 
4. Copy the code on the right side of the box
5. In your Shopify dashboard, choose “blog posts” under “Online Store”
6. Click on the “Insert Video” icon and paste the embed code you copied from YouTube
7. Publish or preview the changes

That’s all there is to it!

That’s all there is to it! If your video player isn’t showing up, double-check the code and make sure you’re using the right HTML/URL. 

Conclusion

We hope this guide has helped you to create your first video so that you can start sharing it with the world. We believe that video is an excellent way to connect with new customers and keep existing ones engaged. If you have any questions about how we use video at our company, don’t hesitate to ask.