How to embed video into a website – Ultimate tutorial

Embedding a video into HTML website seems an easy task, but there really are lots of aspects to take into consideration when you insert a video:

• File size and format (extensions and codecs)
• Browser and platform compatibility
• User internet connection (mobile vs desktop devices)
• Server resources (bandwidth, CPU, RAM)
• Privacy and data owning
• Content visibility and engagement

Therefore, depending on where you will insert the video and the application you use, you will be affected by some of the above or not. So let’s get our hands on it and do a step by step research about what is the simplest way to embed a video.

1. How to embed video into HTML website?
   1. Embed video using HTML5 video tag
   2. Embed video using HTML embed tag
   3. Embed video using HTML object tag
   4. Use iframe to embed video from YouTube and Vimeo
   5. Embed vs object vs video vs iframe comparison
2. How to embed video into CMS site
   1. Insert a video on a WordPress site
      1. Upload video on WordPress site
      2. Insert video from YouTube, Vimeo, and others
      3. Use build in functionality vs plugins
   2. Insert video into Joomla and Drupal site
3. How to embed video in email
4. How to embed videos in presentations
   1. Microsoft PowerPoint
   2. Google Slides
5. How to use Dropbox to embed videos
   1. Use Dropbox as a video provider
   2. Add video to Dropbox Paper
6. How to embed a video in Social Networks
7. Conclusion: Why use third-party platforms for embedding videos is better than self-hosted video ones?/a>
   1. Self-hosted videos pros and cons
   2. Third-party video hosting pros and cons

1. How to embed video into HTML website?

A video file can be embedded into a plain HTML page in various ways. Different HTML tags are/were used in different situations and they are all useful. So let’s take a look to the last arrived on the list.

1.1 Embed video using HTML5 video tag

Like I mentioned, in order to insert a video into your HTML page, you can use the newly introduced  <video> tag. The video tag was recently introduced into the HTML 5 recommendations.

The video tag is really simple, and it works by automatically adding video controls attributes, like play, pause, and volume to the container. It is a good practice to include a width and height attribute. If this last 2 are not set, the browser will not know how much space to assign to the element and the video will make a jump/blink after the browser reads the file.

The source component lets you specify a video file to be loaded by the browser. The content between the <video>  and </video>  labels will be interpreted depending on the browser built-in codecs

You can then set simple attributes to customize your player. For example, if you want to start a video automatically on page load, use the autoplay attribute:

HTML5 video tag – Browser support

There are mainly tree video format that are used to cover all major browsers:

• Mp4 – MIME type video/mp4
• Webm – MIME type video/webm
• Ogg – MIME type video/ogg

By specifying the video file in all these formats you will have the best browser coverage possible.

Browser	MP4	WebM	Ogg
Internet Explorer	ok	–	–
Chrome	ok	ok	ok
Firefox	ok	ok	ok
Safari	ok	–	–
Opera	ok	ok	ok

A small incision here about the video tag and YouTube videos. You can use the HTML5 video tag to embed videos from YouTube to your website. Please note that this will not show the YouTube video preview so it is a smart thing to show an image/poster for this purpose.

1.2 Embed video using HTML embed tag

The embed tag has been around for a long time thanks to the Netscape friends. Although it had a very good acceptation it was considered nonstandard and not included in the HTML 4 specification. It later becomes part of the new HTML5 standard and it seems to have a very good universal support.

As you can notice the embed tag does not require a closing tag. You can simply add your file to the source attribute and you are good to go. The embed tag was mainly used to include applications data and other media content. This are the main files that are supported by the embed tag.

• .mpeg – video content
• .wmv – video content
• .mov – video content
• .swf – application (could be video or any other type of content)

HTML embed tag – Browser support

Internet Explorer	Chrome	Firefox	Safari	Opera
ok	ok	ok	ok	ok

Available attributes for the embed tag

There is a really long list of attributes that are supported by the embed tag. On the other hand, the only ones found in the HTML5 specifications are width, height, src, type and the global attributes (id, class, style, title etc)

Most attributes are not part of the HTML specification but are widely supported. Here are some of them that are useful when used with media files.

• autostart – sets if the media file will play on page load
• volume – set the volume when the media file starts playing. You can set the value from 0 to 100
• loop – sets whether the document will be replayed after it is done. Can have the genuine or false esteem.
• playcount – this sets up how frequently the document will be replayed. For instance playcount="2"  implies it will be replayed two times and after it will stop.

NOEMBED fallback for embed video files

Just in case there is someone who is browsing your website using Lynx browser or any other browser that does not have support for the embed tag, there is a fallback for them. You can use the  noembed tag like this.

1.3 How to embed video files using the HTML object tag

Embedding multimedia files is not the main application for the object tag. Despite this, you can use it to insert videos into your HTML document.

You can set any other param that you need to control the file.

HTML object tag – Browser support

Internet Explorer	Chrome	Firefox	Safari	Opera
ok	ok	ok	ok	ok

According to the HTML 5 recommendations, you should use video for video tag for files.

1.4 Use IFRAME to embed from third-party video platforms like YouTube or Vimeo

Another way to display a video in your HTML page is by using an iframe . Dedicated video content platforms like YouTube or Vimeo provide a simple iframe to display a video on your website.

Embed video from YouTube

To control the player, you will have to send some params via GET  in the URL as follows:

The list of available params can be found here: https://developers.google.com/youtube/player_parameters#Parameters

You can also found the option to dynamically generate the iframe on YouTube website:

• Click the ‘Share’ button below the video
• Click the ‘Embed’ button
• Copy full iframe  code that was given and paste it into the HTML.

If you did that you should get something similar to this:

YouTube is providing, you with the iframe code for sharing purposes, but you can also display your video with the embed, object or video tag (although it is not recommended for long-term functionality).

Embed Video from Vimeo

Vimeo offers various ways to share his videos but still, if you click on their share button you will get a simple iframe like below:

Vimeo also offers the oEmbed API for embedding their video content. According to oembed.com, oEmbed is a format for allowing an embedded representation of a URL on third-party sites. You can find more about the oEmbed API documentation on Vimeo developer website here https://developer.vimeo.com/apis/oembed

HTML iframe TAG – BROWSER SUPPORT

Internet Explorer	Chrome	Firefox	Safari	Opera
ok	ok	ok	ok	ok

1.5 embed vs object vs video vs iframe comparison

embed – it exists from almost the beginning of times, and it is quite very supported by all browsers but it has just been added to the HTML 5 specs. It doesn’t require a plugin to be specified for the embedded content; that’s up to the browser to figure out.

object – was added to HTML 4 as an alternative to embed  and it requires you to specify a plugin. Old Internet Explorer versions had really bad support for it. It is largely used for flash and other apps.

video – was added in the HTML5 specs and is quite well supported at this point. Browsers have codecs support built-in rather than relying on third-party plugins. Different browsers support different codecs so you will have to provide different file extensions if you want to be reached by all major browsers.

iframe – the iframe embed code is actually, a window to a remote page that contains your player with the loaded file. You have limited control over what is displayed.

What video embedding method should I choose?

It seems to be a general agreement that you should NOT use embed or object tags for this purpose. HTML5 has introduced a very specific tag for this and that is why you should use the video tag.

And this is where opinions split and everything really depends on your special case.

If you have a:

• good web server
• some programming skills
• reasonable understanding of what storing a big video file locally means
• you don’t care too much about bandwidth
• You don’t care that others can link to your files and take advantage of your bandwidth

…. then you can use the HTML 5 video tag and have complete control over your player, content statistics and much more.

If what you are looking for a way to publish a video and just forget about anything else go ahead and use iframes. YouTube, Vimeo, and many others have a solid experience in serving videos in the best way possible depending on the user browser, screen resolution, connectivity, and some other factors. So you will be ok.

What about iframe responsiveness?

As I said, an iframe is just a window to content stored on another website. This means that the browser can not know what width and height will have the content delivered in it unless you specify it. Smashing Magazine has a great article on this matter. Here is a small extraction of the solution:

The embed markup

You can read the full article here: https://www.smashingmagazine.com/2014/02/making-embedded-content-work-in-responsive-design/

2. How to embed video into a CMS site

CMS branch looks to be a little bit different when it comes to inserting videos. WordPress, Joomla, Drupal PrestaShop and others have all different ways to inserting a video into their content pages.

Some of them, WordPress, for example, have developed really good and user-friendly support for embedding videos.

2.1. Insert a video on a WordPress site

In our days to insert a video inside a WordPress post or page is really simple. There are mainly 2 ways of embedding a video in WordPress. You can either upload it and host it yourself or load it
from a third-party video platform like YouTube.

2.1.1. Upload video on WordPress site

The standard and native embed code for embedding a video stored locally would be similar to this:

Or like this:

I will start by saying that I (and everybody else) strongly discourage uploading video directly to WordPress or your personal hosting account. If you do a quick search you will find plenty of reasons about why this is not a good practice and why you should let this to YouTube, Vimeo, Amazon, or any other video dedicated service.

So, if you still want to go on and upload a video to WordPress you have to know that this is the default video file formats that you are allowed to upload:

.mp4	.m4v	.mov
.wmv	.avi	.avi
.3gp	.3g2	.ogv

If you would like to add your own extension you can do that by adding a filter. Let’s try to add the WebM video extension.

You should add this to your function.php  inside your theme directory. Please note that in multi-site version you have a section under “MultiSite Dashboard > Settings > Network Settings”

There is also a plugin to add or edit allowed upload file extension under WordPress. You can do that with the WP Add Mime Types plugin.

Anyway, once done that you can step forward and actually upload the video inside your blog post. Go to your Add media button and upload the video file like you usually do with any image. You can also add a video to your Media Library, to be available for future usage.

Please note that in order to play the video files with the WordPress standard Video Player you will need to have them encoded with the MPEG-4 codec. This means that the file extension must be .mp4.

For other file extensions and codecs, you will have to do a small research and find a custom player.

2.1.2. Insert a video from YouTube, Vimeo, and others

From version 2.9 and on WordPress has incorporated automatic link detection. This means it will turn the URL into a native embed code and provide a preview in the WP visual editor. According to WordPress documentation:

To embed a video or another object into a post or page, place its URL into the content area. Make sure the URL is on its own line and not hyperlinked

Here is a simple example of how you should include a YouTube link in the WP visual editor.

This is the equivalent of using a shortcode like this:

YouTube is not the only one that admits automatic embed. The list is big and the WordPress guys are continually working to add new ones.

YouTube	Vimeo	VideoPress
Instagram	Spotify	SoundCloud
Facebook	Twitter	Flickr

You can check here the full list of sites That WordPress will automatically detect and embed the object: https://codex.wordpress.org/Embeds

I would also like to mention that WordPress allows the use of oEmbed object format although it only attends to an internal whitelist of known sites. But if you know what you are doing you can add more to the list.

Here is an oEmbed example link request that will respond with a JSON formatted object.

The oEmbed response will be similar to the following snippet:

2.1.3. Use build-in functionality vs plugins

Well, this really depends on what are you expecting. If you are a light user of the video content and you will need to include a video into your posts from time to time, you should probably be ok with using the built-in functionality.

But if you are a heavy user of the video content and you want to insert daily video and build a gallery and have playlists, cache screenshots of the video and maybe scrap some snippets from the video descriptions you will probably need a plugin for that. There are lots of them in the WordPress plugin directory depending on your needs and you can start your search there. I will include a review of some of them in a future tutorial and link it from here, so make sure you bookmark it so you can come back later.

2.2. Insert video into Joomla and Drupal site

There is really more beyond WordPress. Joomla is really popular and Drupal is here to stay. So I will also drop a line or two about them.

To insert a video into a Joomla site you will first have to enable it from the editor customization. By default Joomla’s editor strips out tags like iframe and others. Go Plugin Manager and find your editor config, remove iframe from the prohibited tag and save your settings. On the other hand, depending on your version or your user role, Joomla may also filter the iframe tag. Go to Global Configuration and search for Text filters. Select No filtering and you should be good to go.

Finally, you will then embed the video the same as you would normally do. Just copy-paste the standard embed code from the YouTube page. After copying the embed code, go to your article and click your Source Code button. Paste it there and check your preview. Congratulations…you have just inserted your first video into Joomla.

How about Drupal? Can we insert a video into Drupal? If you are using Drupal you probably are used to installing modules. There are few modules on the Drupal website that are meant to help you to Insert a video file into your content page. Video Embed Field is a Drupal module that creates a simple field type that allows you to embed videos from YouTube and Vimeo and show their thumbnail previews simply by entering the video’s URL.

3. How to embed video in email

Video content is one of the best marketing tool out there, so why no use it in your email campaigns? Well, there is a simple reason for that. The email will be blocked before even being opened by your customer. Most (not to say all) email software or platforms are not allowing scripting, embeds, and iframes inside the email body. So your email will be filtered by the anti-spam filter and never arrive at his destination.

Although is not perfect, there is a workaround for this. Marketers recommend you place a picture of the video inside your email newsletter and link it to the real video. Your customer will have to click on the image of the video to be redirected to the page where you have your video embedded with an autoplay option enabled. This way, the user will only have to click once to see the video. Please note that most mobile devices will not allow the autoplay option and the user will have to tap again, but you will not have this problem on desktop devices.

Another way of doing something similar is to insert an animated GIF image like below.

You would be surprised what a good designer can do. Also, take into consideration that animated GIF images are not always small in size.

On the other hand, there is some exception to this rule. Gmail, for example, use auto-detection for YouTube videos. So just by copy-pasting the video URL Gmail will transform it into a video player on destination and place it just above the email body.

4. How to embed videos in presentations

How about documents like presentations. Presentations are (should be) very visual, dynamic and interactive. So inserting a video content inside a PowerPoint presentation or Google0-slide worth a try.

4.1. Add video inside Microsoft PowerPoint docs

PowerPoint allows you to embed a video from your PC directly inside the document. You can also embed a video from YouTube. Booth this will only work on PowerPoint 2010, 2013, 2016 o later versions. So make sure you have updated to the latest.

To embed a video go to Insert / Video / Video on my PC. That’s about it. After the video is loaded, you can start to configure options like size, autoplay, and few more details.

To embed a video from YouTube (At this moment YouTube is the only supported website), first you have to get the embed code from the YouTube page. Go to Insert / Online Video. Paste your code and start configuring playback options.

Another option, if you are using old versions of PowerPoint (like 2007) your only option is to include a simple link to the video.

4.2. Add video inside Google Slides presentation

If you are using Google Slides you are in good hands. YouTube videos are natively supported and you can even search them from inside the presentation.Just go to the Insert menu, select video and search for your favorite video to insert into your Google Slides presentation.

How about using a simple video file that is not hosted on YouTube. You can do a simple hack just like for email marketing campaigns. You can make a screenshot of the video and insert it in place. Upload the .mp4 file to your Google Drive and link it to the image. With a simple click, you will redirect the user to your video file.

5. How to use Dropbox to embed videos

Dropbox is not meant to be used for this purpose. Not too long ago some were using it as a CDN to save their server’s bandwidth and resources. Dropbox was forced to change its policies and apply some restrictions, especially on free accounts. So if you need a long-term solution for streaming your video content, do not use Dropbox for hosting them.

5.1. Use Dropbox as a video provider

If you still insist in hosting the video on Dropbox and publish it on your website, you can use the HTML5 video tag for doing that.

Remember that according to Dropbox support, public links for free accounts may not use more than 10GB of bandwidth per day while that limit is 250GB per day for paid Dropbox accounts. The links are automatically suspended if any of your files exceed that limit.

5.2. Add video to Dropbox Paper

Don’t know about you, but I am a big fan of Dropbox Paper. So I wanted to test it against embedding a simple video and see how it responds.

There are mainly the same 2 ways to add a video to Dropbox Paper. Add it from your computer using drag and drop directly into the document or by copying the URL of the media file. Currently Dropbox Paper have native recognition for his own Dropbox files, YouTube, Vimeo, Facebook and Google Drive among others

6. How to embed a video in Social Networks

Inserting video to social media networks is probably the easiest thing these days. You just have to upload your video from your local drive and you are good to go. Big Social Networks like Facebook, Google+ Twitter, and others have native detection for YouTube, Vimeo, and other video platforms. So you don’t have to worry about it.

Facebook, for example, offers the other way around. You can upload your video to his servers and then embed it into your website. Please note that if you want to embed a video from Facebook you must set the visibility to as public.

7. Conclusion: Why use third-party platforms for embedding videos is better than self-hosted video ones?

In conclusion, I will try to be as short as possible resuming the pros and cons of hosting your own videos when embedding vs uploading to YouTube, Vimeo or any others to spread your video content.

7.1 Self-hosted videos pros and cons

Pros: Although there are not too many good and strong arguments, there are some to take into consideration.

• Your data is yours – This can be very important if you care about privacy and especially about brand development.
• More traffic for you – Because the video is hosted only on your site, if a person wants to watch that video will have to visit you.
• More shares of your website – If somebody likes your video it is possible that it will share your site and not your YouTube.
• Full control over your design – What you build is what you have. If you are a good developer you can build a great player that looks professional and there will be no third-party watermark on it.
• Your visitors will remain on your site when the video ends – It is very easy to be distracted with other content when viewing videos on YouTube for example.
• Your video will be ads-free – NO ads will be shown to your user before or after the video. Or at least you can control and decide it and provide your own ads.

Cons: Here are the bad guys of self-hosted videos. And there are quite strong.

• A lot of bandwidth – Hosting videos yourself can cause you a lot of server bandwidth usage.
• Big file size – You can quickly fill your server storage.
• Slow loading – Streaming video by several users can use lots of server CPU and RAM. This can cause slow loading and make the video to freeze.
• File compatibility – You will have to convert your video to various formats if you plan to rich all your users.
• Player compatibility – Finding the perfect video player that will perform ok in most browsers, resolutions, devices, and platforms can be quite tricky.
• Connectivity speed – Playing the video file depending on your user connection is another matter. You may want to serve a 1080p HD video to a high-speed Internet connection and maybe a 240p version to a 3G mobile device.
• Loss of traffic – You can easily loss some extra visits from a social network like YouTube.

7.2 Third-party video hosting pros and cons

Pros: Hosting your video on another website will give about the opposite. You will louse control in benefit of speed and performance

• 0 bandwidth cost for you – No bandwidth is used from your server.
• Multiple file formats – Your file is automatically converted in multiple file formats and loaded depending of the user requirements to provide full compatibility
• Multiple file size – User will be served a different file size depending of his Internet speed connection.
• Friendly user interface – You will use a well-known player for all your users.
• Social shares – You video can go viral on social networks in no-time.
• Privacy – Some platforms allow you to post private content.

Cons: And finally some not-to-good things about video hosting

• Bandwidth can cost you extra – Although 0 bandwidth sounds great, some platforms can cost you extra for more traffic.
• Annoying ads – Sometimes users are blown-up with ads at the beginning, in the middle of after the video ends.
• Privacy – You do not always own your content and that can be a big pain in the ass.
• Content spread – You do not have full control over how the player looks like and where your content is re-posted
• Easy distraction – It is quite easy for your visitor to go with a funny videos about cats instead of continue visiting your site.

And this is about all about the different ways to embed videos. Hope it is useful to you. Please let me know your opinions about where you host your video sand why.