What happens if you store media on Box? This page demonstrates how it’s not an ideal solution. These services are intended for file sharing and collaborating, not for serving files to webpages.
Image file inserted via URL from Box:
The file must have sharing permissions set to “anyone with the link.” Copy the URL from the URL […] Embed Code option, not the browser location bar or share link. On your post or page click the Add Media button, then click the Insert from URL in the left panel.
Even when you succeed, the image will be wrapped in the Box interface which is not that useful. There is no control over size, no wrapping text around an image, etc.
Just the URL on its own line works the same:
Audio file inserted via URL
Pasting the URL for the item, just creates a link because the default URLs in Box have no file extension and are not recognized as a file type.
Audio from Box using Embed Widget
What about using the Embed widget option from Box?
That seems to work in the Preview. But when you publish your WordPress post or page, embed iframe code gets stripped out.
Grabbing just the URL from the Embed Code…
If you copy and paste just the URL from the Embed Code, it embeds and uses the Box player, but you have no control over the dimensions the item displays on the page. Not great:
How about using H5P to embed audio from Box?
It works a little better to create an HP5 content item using the “iFrame embedder” and link to the file on Box, but it’s a lot of steps:
- On Box, set sharing permissions on your file to “Anyone with the link.”
- From the more link for the file […] copy the embed code and pasting into a holding place such as NotePad or TextEdit..
- From the embed code, select only the URL : E.g., from <iframe src=”https://umass.app.box.com/embed/s/21geu2o3bonml8khgzgep187uuget3zo?sortColumn=date&view=list” width=”330″ height=”400″ frameborder=”0″ allowfullscreen webkitallowfullscreen msallowfullscreen></iframe>, select https://umass.app.box.com/embed/s/21geu2o3bonml8khgzgep187uuget3zo?sortColumn=date&view=list).
- In the H5P builder, start an new content item with the type iFrame Embedder.
- Paste the URL into the “source” field and set the hight and width for the area where the player will show. The example below is set to 500 px widht, 300 px minimum width, 100 px high.
- Save the H5P item and embed it on your page or post page by pasting it’s “short code” into its own paragraph.
[h5p id=”7″]
So, where’s the best place to store media files?
IMAGES: It should not be a problems to store images in your blog’s Media Library as long a you upload a reasonably sized file. It’s unlikely you’d ever need an image larger than 2400 pixels wide, and usually you need much less. Don’t upload photos straight off your camera.
You can also embed images hosted on trusted services such as Instagram, Photobucket, Flickr. More trusted sites can be allowed if you activate the iFramely plugin) then just paste the URL (not the embed code) onto it’s own paragraph. And if you activate a plugin such as Instagram-Feed or Flickr Stream, you have even more options.
AUDIO & VIDEO: See Embed Video & Audio Content in Your Blog.
Audio hosted on Box is a bit more manageable than video, but you get the best playback and quality when video is embedded from trusted service such as YouTube, and audio from a service such as SoundCloud. Since blogs are typically open to the public, in most cases it is suitable to host your media on a public platform.
Even though you can embed content from Box or Drive (where members of the UMass community have unlimited storage) using the URL buried in the Embed Code, it will not “stream.” If a visitor starts playing an audio or video file and decides not to finish, streaming results in less data use. When downloading, the file is retrieved and stored in your browser cache in its entirety which can eat up bandwidth for people who have a data plan. It can also result in interruptred and “jumpy” playback on a slow connection.