Key takeaways
- A video embed places a video on a web page, so visitors can play it without leaving the page.
- You have three main options: the HTML video element for files you host, an iframe for videos on a hosting site, or a player SDK for full control.
- Modern browsers block autoplay for video with sound. Add the muted attribute, and add playsinline for Safari.
- The preload attribute is only a hint. MDN notes that browsers can ignore it, and the specification advises metadata as the default.
We all love watching videos online, even to the point where we lose hours a day watching cute animals. But for web developers to put these videos in front of us, they need to embed them first! In this quick glossary, we’ll explain how embedding works and some best practices.
Video embedding is not just limited to websites. It can also refer to integrating various types of content such as links, images, videos, and GIFs into social media posts or other web media. Understanding this broader context of embedding can enrich your content strategy across different platforms.
What Is a Video Embed?
Video embedding means placing a video on a web page or in an app so people can play it right there. The video can live on your own server, on a video hosting site, or on a media platform.
Embedding is a way to share videos on the web. Let’s say you own a blog and want to share a YouTube video with your audience. On the one hand, you can just send them a link to the video and let them watch it on their own time. But that means your user won’t be on your site anymore, and they may not come back.
Instead, you can embed a video directly into your website. This allows the viewer to watch the video on your site without needing to go anywhere else, leaving them right where you want them!
What Are the 3 Ways to Embed a Video?
| Method | How it works | Best for | Trade-off |
|---|---|---|---|
| HTML <video> element | You add a video file URL to your page | Files you host or deliver from a CDN | You manage formats and streaming |
| iframe embed | A hosting site gives you code that loads its player | A fast setup with no code | The host controls the player and branding |
| Player SDK | A JavaScript library builds the player in your page | Branded or interactive playback | More setup |
How to Embed A Video
Embedding a video is a fairly simple process. Most video platforms offer code snippets that you can simply copy and paste into your site, making it easy to embed a video into nearly anything.
If you’re looking to embed a video hosted on Google Drive, here are some steps you can follow:
- Open the video on Google Drive.
- Click the More icon in the top right.
- Click Open in a new window.
- In the new window, click the More icon in the top right.
- Click Embed item.
- Copy the embed code and click OK.
This specific process caters to those who use Google Drive for video hosting and need to integrate these videos into their websites.
If you’re opting for a more manual approach, here are some detailed steps to embed a video:
- Create an HTML document.
- Set the dimensions of the video.
- Set the source of the video file.
- Set the type of video.
- Save the document as an HTML file.
For those using YouTube, you can locate the embed code by:
- Scrolling down below the video.
- Clicking the share button.
Another way you can embed a video is by using the iframe HTML element. As you can see in the example above, this is the way most video hosts prefer to embed videos. You can embed just about any kind of video, whether hosted on YouTube, Vimeo, Dailymotion, or other hosts.
Add the video element with a source. These attributes cover most needs.
| Attribute | What it does | Note |
|---|---|---|
| controls | Shows the browser’s playback controls | Add it unless you build your own controls |
| poster | Shows an image while the video loads | Set it. Otherwise nothing shows until the first frame is ready |
| preload | Hints how much to load early: none, metadata, or auto | A hint only. Browsers can ignore it |
| muted | Starts with the sound off | Needed for autoplay in most browsers |
| playsinline | Plays inside the page, not in fullscreen | Needed for autoplay in Safari |
| width and height | Reserve space on the page | Help avoid layout shift |
| loading=”lazy” | Delays loading until the video is near the screen | Check browser support before you rely on it |
<video controls muted playsinline preload="metadata"
width="1280" height="720"
poster="https://res.cloudinary.com/<cloud_name>/video/upload/so_0/<public_id>.jpg">
<source
src="https://res.cloudinary.com/<cloud_name>/video/upload/f_auto/q_auto/<public_id>"
type="video/mp4">
</video>How Does Autoplay Work?
MDN says you can assume media will autoplay only if the audio is muted or at zero volume, the viewer has interacted with the site, the site is on an allowlist, or a permissions policy allows it. To autoplay a video, mute it or remove the audio track. Add playsinline so it works in Safari.
How to Embed With an Iframe
- Copy the embed code from the hosting site.
- Set a title attribute, so screen readers can name the frame.
- Set a width and height, or use a responsive wrapper.
- Load embeds below the fold lazily.
5 Tips for Faster Video Embeds
- Deliver the right format.
Use automatic format and quality, such asf_autoandq_autoin Cloudinary URLs. - Use adaptive streaming for longer video.
HLS or DASH lets the player match quality to the network. - Set a poster image.
It gives viewers something to see while the video loads. - Preload only metadata unless the video is the main content of the page.
- Reserve space.
Set width and height to avoid layout shift.
Common Mistakes With Video Embeds
- No poster image.
The player renders as an empty black box until the first frame arrives. - preload=”auto” on every video.
The page downloads megabytes nobody watches and competes with the content that matters. - Autoplay with sound.
It is blocked, so the video simply never starts. - No width and height.
The embed pushes the page around as it loads, which hurts Cumulative Layout Shift. - An iframe with no title.
Screen readers announce an unnamed frame, which fails accessibility review.
Control Your Video Embeds with Cloudinary
Video embed codes are one of the best ways to share your video. They’re easy to use and make it simple for people unfamiliar with how YouTube works to play videos on their site. But you’ll need a different solution if you want a custom video player. Most video hosts won’t allow you to customize it at all, leaving you at the mercy of their offerings.
With Cloudinary, you can fully customize your video player and add rich features such as shoppable videos, appearance, and more! Plus, with Cloudinary’s Media Optimization, you can ensure that your videos always have the most optimal format for your viewers.
Cloudinary delivers video through URLs. Add f_auto and q_auto to deliver the best format and quality for each browser. Use sp_auto with .m3u8 or .mpd for adaptive streaming. For a full player, use Cloudinary Video Player, which you can install from npm or load from a CDN. The Cloudinary Video Player Studio gives you UI configuration options for fitting the player to your brand.
Where not to use f_auto. Don’t add f_auto to an incoming transformation or a named transformation. Cloudinary resolves the format for each request at delivery time.
Frequently Asked Questions
What is a video embed?
A video embed places a video on a web page or in an app so people can play it there. It can use the HTML video element, an iframe, or a player SDK.
What is the difference between embedding and hosting a video?
Hosting stores and delivers the video file. Embedding places the video on a page. You can embed a video you host yourself or one that lives on another site.
Why won’t my embedded video autoplay?
Browsers block autoplay for video with sound unless the viewer has interacted with the site. Add the muted attribute, and playsinline for Safari.
Does embedding a video slow down my page?
It can. A video file can be large, and an iframe loads a whole player. Use a poster image, preload only metadata, and consider lazy loading.
Should you use an iframe or the video element?
Use an iframe for a quick setup on a hosting site. Use the video element or a player SDK when you want control over formats, branding, and speed.
