Add YouTube, Vimeo or any URL based content to LUNA

Treating URLs as objects in LUNA can empower users to add more content to LUNA from very diverse sources. If a browser can render it, then LUNA can too. 

LUNA can support most any file type to upload as a miscellaneous file and we've enhanced LUNA 7 to treat .html files in a special way that allows them to load the content in the Detail View. This means you can add a Custom Thumbnail and catalog these items just like any other item in LUNA.

Step-by-step guide

Lets start with simple video from YouTube.

  1. In a text editor like Text Wrangler for the Mac or Notepad++ for Windows make a new file with the extension .html
  2. Insert your HTML Embed code and make sure the width="100%" height="100%" this will make the content fill the detail view frame.

    <iframe width="100%" height="100%" src="https://www.youtube.com/embed/lJIrF4YjHfQ" frameborder="0" allowfullscreen></iframe>
  3. Save your file and test it by opening it in any browser. This is how it will play back in LUNA.
  4. Next, you need to make sure you have the permission to add .html content. 
    1. Open the Administrator and edit the Credential that you are using to upload content. Add html to the list of allowed file extensions. 
    2. Save your credential settings.
  5.  Now using the Uploader add the html file.

    Tip to adding Custom Thumbnail during Upload

    You can add a Custom Thumbnail image at the same time you upload your file if you include a jpg file with the same name. For example myVideo.html myVideo.jpg

  6. That's it. You now have html files in your collection and can work with them like any other content in LUNA.

Example Files

 

Getting Youtube and Vimeo Images for your Thumbnails 

YouTube

Youtube videos have several static images that represent it.

https://www.youtube.com/watch?v=KaOC9danxNo

By calling the video ID (KaOC9danxNo), you can grab various resolutions that are the representative of the video.

http://img.youtube.com/vi/KaOC9danxNo/maxresdefault.jpg

http://img.youtube.com/vi/KaOC9danxNo/0.jpg


Vimeo

For Vimeo it's a little bit trickier.

For this video https://vimeo.com/175266909


You can pull this xml document:

https://vimeo.com/api/v2/video/175266909.xml

Or, you can get the data returned as JSON:

https://vimeo.com/api/v2/video/175266909.json


Pulling the largest thumbnail from the XML:

<thumbnail_large>https://i.vimeocdn.com/video/582362777_640.webp</thumbnail_large>

https://i.vimeocdn.com/video/582362777_640.webp


Just changing the extension will load other formats:

https://i.vimeocdn.com/video/582362777_640.jpg

https://i.vimeocdn.com/video/582362777_640.png