Embed YouTube Video on Rackspace Cloud Files HTML Page even with HTTPS URL using Object Parameter and YouTube Player API’s functions.Playing on Cloud made easy. If you are wondering what we want to doing in this Embed YouTube Video on Rackspace Cloud Files guide, read this tutorial on how to create Cloud Files Hosted Music Player of Your Own where we used jPlayer or Guide on Rackspace Cloud Files and Bootstrap. The advantage to embed YouTube Video on Rackspace Cloud Files HTML Page is that – you need not to host the video or re upload it on Cloud Files. Additionally, you can basically use the features of YouTube. There are basically two parts.
Embed YouTube Video on Rackspace Cloud Files : The Cloud Files Part
It has been said so many times, just the link to the tutorial goes here.
Embed YouTube Video on Rackspace Cloud Files : The YouTube API Part
This is actually the difficult part but we will iron it out to make it very easy. You can read the full documentation to get dizzy :
---
1 | https://developers.google.com/youtube/flash_api_reference |
For example you want to show your video already on YouTube like ours one :
1 | http://www.youtube.com/watch?v=tR6xen8iZBM&feature=plcp |
The basic HTML you will need is :
1 2 3 4 5 6 7 | <object width="640" height="360"> <param name="movie" value="https://www.youtube.com/v/ID?version=3"></param> <param name="allowFullScreen" value="true"></param> <param name="allowScriptAccess" value="always"></param> <embed src="https://www.youtube.com/v/ID" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="640" height="360"></embed> </object> |
ID is unique and (basically I have forgotten) probably requires apply for the ID thing as YouTube partner. It is here on URL :
For a working example with minimalistic player which will show Ads and Logo overlay will be :
1 2 3 4 5 6 7 8 9 | <center> <object width="640" height="360"> <param name="movie" value="https://www.youtube.com/v/ya1lSQp3KQU?version=3"></param> <param name="allowFullScreen" value="true"></param> <param name="allowScriptAccess" value="always"></param> <embed src="https://www.youtube.com/v/ya1lSQp3KQU" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="640" height="360"></embed> </object> </center> |
So, the next step is to copy paste it in any text editor (in my case this is the code with proper ID) and save it as anyname.html file then it will work fine as a simple HTML file. Just upload it to Cloud Files and change the POST info (as written in the linked guide), I will get this thing :
https://91c3c05e204edecb5349-d31753e213812e3a47f7a92bbc27e375.ssl.cf2.rackcdn.com/youtube.html
And a free SSL certificate with no mixed content error :
This is what we said as an excerpt – Embed YouTube Video on Rackspace Cloud Files HTML Page even with HTTPS URL using Object Parameter and YouTube Player API’s functions.Playing on Cloud made easy. You can make it more complex, but this is the easiest example. It actually takes around 1.17 seconds to load :
1 | http://www.webpagetest.org/result/121105_FS_1XQ/1/details/ |
It is on 100% CDN, fully scalable platforms.
