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.
How to embed video using video sharing platforms and 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.
Read on how to embed video into your website by using video sharing platforms like Youtube and Vimeo.
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.
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.
Listed below are some of the advantages and disadvantages when supplying video onto your website using a video sharing platform:
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.