/ technical

Embedding Videos from OneDrive into your Blog

In my last post I have been struggling with embedding videos into my blog from my OneDrive account.

Since I have 1TB of unused space on OneDrive, it seemed logical for me to put it to use and host my big video file on it. At the same time, I want my video to play from within the blog and not be redirected to OneDrive website.

OneDrive does provide an "Embed" option that generates <iframe> HTML tags with the video inside, but for me, for some reason the video controls are messed up, the video would not resize properly with the width attribute, and this only happened when I post the website on my server. However, on my own pc (windows), for some reason it worked perfectly.

UPDATE

This is no longer true. Microsoft has fixed this issue and the iframe method now works. However it is still buggy and slow to use compared with the method I show below.

(here's the code generated by OneDrive)

<iframe src="https://onedrive.live.com/embed?cid=A82DFC6ED9776AF4&resid=A82DFC6ED9776AF4%212082&authkey=AMCIqSB8zNNJvxM" width="320" height="185" frameborder="0" scrolling="no" allowfullscreen></iframe>

(here's a picutre of how it supposed to look like)
example_working

(here's what actually happens)
exmple_no_working

The different between the first and second example is that the first works within the HTML page and can be resized, whereas the second would redirect you to OneDrive to make the video work.

It took me a while after pondering, wondering and tinkering here and there and with the help of some blog posts online, I came up with this solution.

Ditch the proposed embedding method from OneDrive (using <iframe>) and use the video tags instead (<video>). You will need to also modify the url given from OneDrive, and here's what you do.

Take the code generated by OneDrive

<iframe src="https://onedrive.live.com/embed?cid=A82DFC6ED9776AF4&resid=A82DFC6ED9776AF4%212082&authkey=AMCIqSB8zNNJvxM" width="320" height="185" frameborder="0" scrolling="no" allowfullscreen></iframe>

copy the src value (i.e. https://onedrive.live.com/embed?cid=....) and replace the word embed with download. Then you uses that value in the <video> HTML tag and the result will look like this:

<video width="100%" controls>

<source src="https://onedrive.live.com/download?cid=A82DFC6ED9776AF4&resid=A82DFC6ED9776AF4%212082&authkey=AMCIqSB8zNNJvxM" type="video/mp4">

Your browser does not support the video tag.

</video>

Now one last thing to note, not all video formats are supported by the <video> tags. I have tried this with MP4 and it works perfectly. If this works for you with other video formats let me know.

Here's a proof that this works






The following are alternative codes that can work####

  • No controls with autoplay:


    So what if you want the <video> solution, but you do not want the users to control the video. At the same time you'll have to make the video start automatically. This is a bit annoying though, so I won't show you the result, just the code. All you need to do is to remove the controls option and add autoplay instead
<video width="100%" autoplay poster="link to your poster image">

<source src="https://onedrive.live.com/download?cid=A82DFC6ED9776AF4&resid=A82DFC6ED9776AF4%212082&authkey=AMCIqSB8zNNJvxM" type="video/mp4">

            Your browser does not support the video tag.
</video>


  • No Download button:


    In the video player of Chrome you typically find a "download button" at the end of the control list. You can remove that by simply adding controlsList="nodownload" in your video tag as follows
<video width="100%" controls controlsList="nodownload" poster="link to your poster image">

<source src="https://onedrive.live.com/download?cid=A82DFC6ED9776AF4&resid=A82DFC6ED9776AF4%212082&authkey=AMCIqSB8zNNJvxM" type="video/mp4">

            Your browser does not support the video tag.
</video>

You might be interested in all the controlList options that the chrome player can offer: click here

That's all folks,

Enjoy :)

Omar Al-Terkawi

Omar Al-Terkawi

A Microelectronics engineer, PhD student, and a Dreamer. I write here my personal thoughts, ideas and stories; sometimes in Arabic, sometimes in English, depending on the mood.

Read More