Video playback is supported on all modern devices, and video pages are responsive, suitable for desktop and mobile browsers alike.
HTML5 video embedding allows you to host video locally in your own space; it's also the most complicated to setup. The Vimeo and YouTube options are much easier to implement, but require that your video be hosted on either the Vimeo or YouTube website, respectively. HTML5 video …
To get running with HTML5 video, we must add MIME type directives to a .htaccess file so that browsers are able to properly recognize the video files. This is a one-time setup that you will not need to repeat when adding new video to your site.
Access the root of your website using an FTP client; if hosting with Bluehost, that's your /public_html/ folder. Make sure your FTP client is configured to show invisible files, because .htaccess is usually invisible.
If you have a preexisting .htaccess file, edit it. If there is no .htaccess file, create a new file and name it “.htaccess”. For more information on creating a .htaccess file, see here.
Add these lines to your .htaccess file to set the video MIME types:
<IfModule mod_mime.c> AddType video/mp4 mp4 m4v f4v f4p AddType video/ogg ogv AddType video/webm webm AddType video/x-flv flv </IfModule>
Save the .htaccess file.
Full HTML5 video support requires identical video files in three formats:
For older browsers lacking HTML5 video support, or browsers for which a video file is not supplied (i.e. if the OGV or WebM files are missing), then the h.264 video file will be played back using a Flash-based browser.
So while the ideal setup is the combination of MP4, OGV and WebM files, it is possible to supply only the MP4 file and to use the Flash fallback for other browsers. This is not recommended, however; if you are unwilling or unable to supply OGV and WebM video files, then please choose either the Vimeo or YouTube video methods above.
The most important aspect of the setup within Lightroom is correctly supplying the file name. The three video files and the poster image should be named identically, for example:
The name of the video should then be entered into Lightroom without a file extension, “my_awesome_video”.
Supply a human-readable title for the video, and hit the checkboxes for all supplied video formats.
The Native Video Width and Height controls are used to determine the aspect ratio of the video. The video itself will resize to fit the available space, whether wide on desktop or narrow on an iPhone, maintaining the correct aspect ratio.
To restrict the video to a specific size, scroll down to the Gallery / Media Area section, and set the Mantle or Core width to a fixed value. For example, you can set the Core Width to “fixed” and 640:
The widest this video will ever be is 640-pixels. Because we are using the Core Width, the video will sit in a full-width stage with our chosen background color. So in a 900-pixel space, the 640-pixel video would be centered with black borders:
If you don't want these black borders, set a fixed width to the Mantle instead.
Upon Export, you will be prompted for a save location. Within the exported folder, a
/videosrc/ folder will be created. You should copy your video files and poster image into this
Having copied your videos into this folder, upload everything to the Web.
Using CE4 Publisher, you may export an HTML5 Video stage for use as a publisher template. This allows you to manage your video pages from Lightroom's Publish Services.
Using CE4 Stage, setup for HTML5 video and then export. The saved folder will be your HTML5 video template, and should be uploaded to
/ttg-be/templates/gallery, same as your other gallery templates.
DO NOT put video files into the template. The template will include a /videosrc folder, but we're not going to use it.
Instead, you should create a /videosrc folder at the top-level of your website:
This folder would be accessible at
When publishing a new video page, upload all of your video assets – the MP4, OGV, WebM and poster image files – to this folder. All of your videos will be stored in this folder, so each video should have a unique name.
In Lightroom's Publish Services, right-click the publish service for your website and “Create Album…”
For Template, choose the template you created for HTML5 video.
Click the Page Content tab. The Video ID field will be active, and here you should input the name of your video, without extension:
This video name should correspond to the video files you've uploaded to the folder at
Set the rest of the album options as you normally would, then press Create. Your new video page is online.
Just because you can, does not necessarily mean that you should. For example, if you're on a shared hosting plan such as those offered by Bluehost, then HTML5 Video is probably not for you. Serving video directly from your site will chew through your bandwidth quickly.
If you're serious about video privacy, delivery and platform scalability, then a Vimeo Pro account is worth serious consideration. Otherwise, check Vimeo's other membership options to find the level that's right for you.
The Turning Gate
Creating webbly, wobbly, Lightroomy things since 2007.