The Quick And Dirty Guide To Embedding Responsive Video On Your Site
So you want to start adding video to your site, but have no idea how to start. Or maybe you're already adding videos, but when you do they break the whole feng shui of the site because they don't resize with the screen.
Luckily for you, and the people trying to watch your videos on their phones, it's super easy to add responsive video to Squarespace and WordPress sites.
Before we talk about the specifics, one quick note. Your first thought might be to just upload your video to your site like you would a photo. Not a good idea. If you're only using a couple of short videos you can make it work, but anything more than that will bog your site down.
Your best bet instead is to store your videos somewhere else and embed them in your site using a line of code. You can use a video sharing site like YouTube, a paid solution like Vimeo if you need videos to only be visible to certain people, or a file storage spot like Dropbox. For this tutorial we'll assume your video is already uploaded to YouTube, but the process is very similar for the other sites.
>> No time to read this article right now? Download the PDF version and keep it around as a handy reference!
First, open your YouTube video. Click the Share button. Copy the URL in the text box.
Side note: If you want your video to start at a certain time (maybe to skip the first few seconds where your cat knocked over your microphone), you can do that here by checking the "Start at" box and entering a time. This automatically adds a few characters to the end of the link, in the example below the "?t=24s" at the end of the link indicates that the video will start at 24 seconds. If you leave the box unchecked your video will just start at the beginning.
If you're using Squarespace you can take the Video URL you just copied and go straight to your site now. Open a page or post and add an Embed content block. You'll be prompted to paste your Video URL, and it will automatically handle the responsiveness for you. Boom, you're done.
If for some reason the Embed block doesn't work you can use a Video content block instead. Clicking on the </> icon in the Video URL field will open a popup where you can paste the custom embed code you'll get in the next step.
If you're on WordPress there are a couple more steps you'll need to take. First, go to www.embedresponsively.com. Select your video sharing site from the options at the top, then enter the video URL and click Embed.
Your video preview will appear, along with the embed code in a text area below. Copy the embed code and log in to your site.
For WordPress posts and pages you can add the code directly to the post/page editor by clicking the Text tab at the top of the editor. Just find the spot on the page you want to add the code to and paste.
For WordPress widget areas like sidebars and footers you can paste the embed code directly into a Text Widget.
That's it! Now you can add video and keep everything flowing smoothly on mobile devices. You did such a good job you should probably take a break and watch this whole funny animal video. You know, for educational purposes.
Thinking about DIYing your site? Stuck in an endless loop of Google searches and trial and error? Let me help! I'll walk you through the exact process I use when building sites for my own clients! Click here to learn more.