Atomic Smash homepage splash

Embedding video using video sharing platforms

Words by Colin GoodmanJune 14, 2017

Embedding video onto your website is becoming increasingly popular and one reason behind this is that its getting easier to implement. In part 1 of this HTML video series I talked about the new HTML5 video tag. In this part, I will be focusing on how to embed video using video sharing platforms.

Embedding video into your website

How to embed video using video sharing platforms and the HTML5 video tag.

1

Embedding video using the HTML5 video tag

Read how to embed video into your website while understanding some of the advantage and disadvantages of the methods mentioned in this post.

2

Embedding video using video sharing platforms

Read on how to embed video into your website by using video sharing platforms like Youtube and Vimeo.

Embedding video from Youtube

With video sharing platforms offering another option to embed video on your website, you may choose to use this method due to its ease of use.

If you want to embed videos that are hosted on Youtube, it’s a simple case of using the embed code they supply.

All you need to do is visit the video tha you want to embed from Youtube, copy the code into the HTML, and there you have it – the video will now be viewable on your website.

<iframe width="560" height="315" src="https://www.youtube.com/embed/[your video code]" frameborder="0" allowfullscreen></iframe>

Above shows an example of the code Youtube supplies you for embedding a video. Vimeo offers the same functionality in that it supplies an embed code for any video which you can simply place into your HTML.

Why use Youtube or Vimeo to provide video on your website?

So that’s how you embed video from sites like Youtube and Vimeo, but why use them and why choose this method over using the HTML5 video tag? I can’t deny that embedding video from sites like Youtube is ridiculously easy and can understand why this method is popular, however it does come with downsides like any method.

At Atomic Smash, we have used both methods and getting them to work seamlessly in our WordPress builds has at times been challenging. Most recently, a client wanted a full screen video to display, requesting it to be implemented using a Youtube embed code. This seemed pretty straight forward but getting into development, certain issues started to arise making this piece of work more challenging than first anticipated.

The first issue was that the client wanted the video to loop and not show any Youtube advertisement. By default at the end of every video Youtube will offer you other videos it thinks you might be interested in but this is not ideal in certain situations. I tried various methods to achieve this but was unable to obtain a consistent solution for all browsers, so resorted to using a plugin called Tubular.

Tubular is a jQuery plugin that focuses on converting Youtube videos into full screen videos whilst removing any advertisements from the video. Though getting Tubular to work was straight forward, I soon discovered another issue that if the Youtube video was part of a playlist, some advertisement will pop up still. To avoid this, you have to make sure your video is not part of a playlist, which could be annoying.

After all the work was completed, I felt using the video tag would have been a lot easier, however it was not ideal for this situation in regards to our client’s needs.

What are the pros and cons?

Listed below are some of the advantages and disadvantages when supplying video onto your website using a video sharing platform:

Advantages

  • easy to implement
  • cross browser compatible
  • the video is not directly hosted on your website – improving performance

Disadvantages

  • advertisement will be unavoidable
  • as you have hosted the video on a video sharing platform, you technically don’t own the rights to the video now
  • the video player is difficult to customise completely

And that’s my experience of using video sharing platforms to embed video into websites.

Although using a video sharing platform is quick and easy, I prefer to embed video using the HTML5 video tag. The reasoning behind this is that the video tag will be improved upon in the future and offers more flexibility in styling the video element.

Profile picture of Colin Goodman

Colin Goodman

Colin works very closely with David and Jenny on the front end development aspects within projects. He has an exceptional eye for detail and is constantly looking at new ways to code websites with the latest technologies available.

Go back to top

Keep up to date with Atomic news