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.

(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


Enjoy :)