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.
- In a text editor like Text Wrangler for the Mac or Notepad++ for Windows make a new file with the extension .html
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>
- Save your file and test it by opening it in any browser. This is how it will play back in LUNA.
- Next, you need to make sure you have the permission to add .html content.
- Open the Administrator and edit the Credential that you are using to upload content. Add html to the list of allowed file extensions.
- Save your credential settings.
- Open the Administrator and edit the Credential that you are using to upload content. Add html to the list of allowed file extensions.
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
- 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 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
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
You can get the data returned as JSON as well.
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
Related articles