Lytro Web Player | Resource Guide

Living Pictures are powerful visual tools for presenting photo-based content, telling compelling stories and engaging with your online audience. Lytro offers a comprehensive set of solutions for capturing, editing and presenting Living Pictures across a wide range of devices and environments. On the web, Lytro provides easy-to-use interactive players that you can use to show your Living Pictures on your web site.

The Lytro Web Player is based on HTML's <iframe> tag and is readily available for anyone to embed Living Pictures on any website or blog. Users can take the iframe embed code from pictures.lytro.com and place it in their own website in their desired location. Your embedded Living Picture can be further modified with the Web Player Customization Tool to meet your visual and interaction needs with easy-to-understand attributes and pre-defined settings. The Web Player requires no licensing and can be used by anyone without any limits on any website that supports <iframe>. The Web Player Customization Tool is free to use. <iframe> is supported by all of the modern browsers on desktops, tablets, and smartphones.

You can get the Lytro Web Player embed code by clicking on the button (</>) on the right-hand side of the picture and click on the COPY button. The player's HTML code would be stored in your clipboard, ready to be pasted. Find the place on your post or webpage where you want the Living Picture and paste the code into the HTML editor. The picture will appear on your website or blog using the Lytro Web Player. All associated web assets for embedded Living Picture will remain hosted on Lytro's servers, so all you have to care about is simply how you wish the Living Picture to look on your page/site.

Please note that not all publishing platforms and/or websites support the <iframe> HTML tag or allow users to enter HTML tags directly. Please refer to your system's documentation for more information.

The Lytro Web Player requires no licensing and can be used by anyone without any limits on websites that support iframe embeds. The Lytro Web Player is supported by any browser that supports HTML5 well (Chrome 31+, IE 10+, Firefox 20+, Safari 7/8+, Opera 26+, Mobile Browsers: iOS Safari, Chrome for iOS/Android, Firefox for Android).

Embedding a Living Picture in an HTML document

Go to pictures.lytro.com and click on the picture or album that you wish to embed. Click the (</>) button on the right side of the picture or below the album name to see the HTML embed code. Click the "Copy" button, find the place on your HTML document and paste it. The picture would appear on your website or blog in the standard embedded Living Picture presentation.

To modify the player using the Web Player Customization Tool, click on the "Customize" button. You will then launch the customization tool and can select which Lytro Web Player attributes you want to change.

Using the Web Player Customization Tool

The Web Player Customization Tool is a simple-to-use wizard which allows you to easily modify the features and appearance of the Web Player for use on websites and blogs. This section outlines all the options that are available for you to edit how your Living Pictures are presented.

The customizable Lytro Web Player attributes and their effect on the player's look and feel are:

  • Info Layer – Determines whether to show/hide the attribution credit bar and image notes at the bottom of the player
  • Lytro Logo – Determines whether to show/hide Lytro's logo
  • Fullscreen Button – Determines whether to show/hide the Fullscreen button
  • Help – Determines whether to show/hide the help button
  • Play Button – Determines whether to show/hide the Play button
  • Slideshow Navigation – Determines whether to show/hide the Left and Right navigation arrows for an embedded album that contains multiple pictures. If these arrows are hidden, the only way to see the multiple pictures in an album is by clicking the Play button, if enabled. Play will animate every picture in the album from first to last.

If you launch the Web Player Customization Tool from this web page, you will see a sample image displayed in the tool's preview window. To use the customization tool with the Living Picture(s) of your choice, go to your album view on pictures.lytro.com and click on the album of pictures or the single picture within an album that you wish to embed. Click the (</>) button below the album name* or on the right side of the picture. Then click the "Customize" button to launch the customization tool with the picture(s) from that page.

The free Web Player Customization Tool is available here.

* If the "Customize" button is not available for your album, picture processing may not be complete.

Embedding a Living Picture in other websites

The Lytro Web Player also allows you to embed Living Pictures on Tumblr or Wordpress' content management tools.

Tumblr

You can embed Living Pictures on Tumblr by adding it as Video content. Click on the Video link (shown below).


Once you paste the embed code, you will see the Living Picture embedded in your Tumblr page



Once you click on the Video link, it will open a window, which allows you to embed code or a Video URL.

The Living Picture will be displayed on your home page once you save your post.

Using videos instead of Living Pictures

At times, you might prefer to have the storytelling power of Living Pictures without the interactivity or the need to embed Lytro’s web player. The best way to achieve that is to export the living pictures as videos, host them on a video site and then embed that website’s player on your site. Here are step-by-step instructions for how to do that:

  1. Open your Living Picture in Lytro’s desktop application
  2. Double click the thumbnail to present the picture in “large view” mode
  3. Select the "Animate" pane from the left side of the application
  4. Use the animation tools to set your desired sequence (you can make it as long and complex or short and simple as you wish).
    * To learn more about the “Animate” pane visit: here
  5. When your animation sequence is ready, select the “Export Animation As Movie…” menu item from the “File” menu
  6. Select your exported file name, size and quality settings and click the “Export” button. We recommend that you try the different settings to make sure that it suites your needs (file size vs. preparation time and quality)
  7. The application will take a few seconds or minutes to prepare your animation and will create a standard MPEG4 (mp4) file as the output
  8. Select what website you wish to host your video file at (YouTube, Vimeo, etc.) and upload it to your account
  9. Look-up the embed code of your video and paste it into your website

* Note that in most video players you can control many parameters including the dimension of the player and visible controls. For example, when using YouTube, click on the “Share” icon for your video, click on the “Embed” tab followed by the “SHOW MORE” link and then you can select all of the possible controls.

* You can find YouTube’s full documentation for their web player here


Once embedded on your site, the player will look like this: