A video embed code is a string of code containing a video’s data: its URL, size, and name, among other variables. These codes allow you to show video content on your blog and landing pages. And you definitely want video content on your blog and landing pages—research by Wistia showed that videos boost session time by 2.6x.
You need to learn how to customize and embed video codes from any source to ensure the videos play smoothly. Not knowing how to embed your code properly can mean hosting an unresponsive video that viewers can’t watch or share. These three steps go beyond the usual “copy-and-paste” advice, teaching you how to embed videos that stand out in your articles.
1. Choose where you’ll host your video.
Each video hosting service has unique features and constraints. Some hosting providers offer just the basic tools. These will let you host videos and pick their placement, which is enough if all you need is to distribute videos on your website. But for other companies, these tools might be insufficient for all of your needs. For example, a basic hosting service is not enough if you want to edit how a video plays and track its performance.
Cheap hosting providers are affordable, but they experience more downtime than reputable ones. A reader who can’t watch a video that promises to solve an important problem will look for an answer elsewhere. It doesn’t matter if you embed a video from your laptop or a streaming site—you’ll want to choose a reputable hosting provider with tools that’ll help you achieve your goals.
Your goals determine the hosting you’ll choose. If you want to grow your brand awareness, use YouTube. A video you upload to YouTube and later embed on your website will rank on YouTube and Google search, so you’ll reach the widest audience.
For a company focusing on high-intent leads rather than a broad reach, Wistia is a better option because of its in-video lead generation tool. It lets you add CTAs and forms to build a list of potential customers straight from the video player.
2. Locate the video’s embed code
Some CMSs let you embed videos without their embed code. All you need to do is paste the video’s URL, and the CMS will insert it into your website. While convenient, it’s better to search for the video and its embed code manually. Access to the code allows you to present your video how you want.
Complete control over the embed code allows you to provide a pleasant viewing experience across devices. And making it easy to watch the video is essential to helping your page rank on Google. Their Web Vitals measure how easy it is to browse your page. When viewers struggle to play or click a button because of its location, Google can demote your articles.
Most hosting services store embed codes under the video player’s Share option. While the code’s information varies between hosts, you’ll usually see data about the video’s size, duration, and title. You can edit this information once you’re ready to embed your video.
3. Customize how your video looks and plays
You can increase the likelihood that someone watches your video by editing how it looks and plays. Unedited embedded codes can play videos that get lost within the article or take too long to get to the point, garnering zero views. You can maximize the number of views your video receives with a few adjustments.
Appearance
Your video player’s size, color, and placement influence if someone watches your video. Viewers can miss out on your video if its player is too small or barely visible. To influence readers to stop scrolling, pick a color for your video player that contrasts with the rest of the page.
Let’s say your page uses a white background and your video player uses a thumbnail and play button in a light color. In that case, a reader skimming your article might not see it. Alternatively, imagine you edit your embed code so the play button is bright red and the video covers 80% of the page. These edits would make it hard for viewers to miss out on your video.
You can edit a video’s size and the player’s colors by editing the code. To change the size, go to the embed code and look for “width=” and “height=.” Choose a size that covers most of your website’s screen to make it visible. In most cases, a 1280-pixel width and a 720-pixel height are enough.
In-line style code can adjust the color of your video player and its border. Change these elements by first finding the word “iframe” in the code. This text is a code line that embeds another document into an HTML file. Then paste style=”border: 5px solid #AAA; immediately after it. The number before the “px” indicates the border’s width, while the three letters after # state define the border’s color in HTML color codes.
Player settings
Embedded videos play differently depending on your code’s parameters, also known as attributes. Edit the code to make your videos more useful for viewers.
Sometimes you want the viewer to skip the start of a video. Maybe the intro isn’t helpful for their problem, and you want them to get straight to the essential information. Or perhaps it targets a different audience but has information everyone might find helpful. Whatever the reason, you can adjust the code to start your video whenever you choose.
YouTube’s embed options let you edit the video’s start minute without making you write lines of code. Go to Share, Embed, tick the “Start at” box, and write the time where your video should start. People outside of YouTube can usually set the start time under the embedding options.
Another helpful attribute is the Loop parameter, which allows you to make a video repeat itself once it finishes. This is useful for viewers learning a skill from an educational video. This benefit occurs because the brain is better at recalling and retaining information that it sees or listens to more than once.
You can loop your video in most hosting services by ticking a box in the embed options. If you’re hosting on YouTube, look for the web address after “src=” in the embed code—this line of code is the source URL.
Then, look for the Video ID—the alphanumeric letters after “/embed/.” Write “?playlist=[Video ID] &loop=1” next to the last number of your video ID, and, from that point forward, your embedded video will loop itself.
Embed Vyond-Made Videos Into Your Website
Vyond is an intuitive animation software that members of the marketing, human resources, and learning & development teams can use to create engaging videos. These videos reduce onboarding time by 67%, grow conversions by the same percentage, and boost video shares by 375%. With Vyond’s templates, anyone—regardless of video-animation experience—can gain immense benefit from using videos.
Start a free trial
