How to customize the iframe of your timelapse project?

With Enlaps' Tikee solution and the myTikee web application dedicated to timelapse, you can easily integrate your timelapse project into your website with just one click. Whether you're looking to include a panoramic video, a before-and-after comparison, or an image gallery, you're provided with customizable iframe links. This guide will walk you through how to tailor these iframes to enhance your timelapse project's presentation on your site.

Accessing the Iframe Integration Code

To locate your iframe code, navigate to the project index:

1. Go to Project.

2. Click on Share.

1. Modifying the Iframe Size

You can effortlessly customize the iFrame embed code straight from the code itself. A default scrollbar often appears when a gallery is embedded within an iframe that's smaller than the gallery itself. To handle this, you're presented with two straightforward adjustments for the iframe.

One option is to resize the iframe to align with the gallery by modifying the height and width values in the code as depicted below.

<iframe src="https://staging.tikee.io/time_lapses/1879/photo_gallery/6b12e12d-5650-4aed-8495-38fee083fbba?lang=en" allowfullscreen style="width: 900px; height: 620px; border: none;" ></iframe>

You may also eliminate the border and scrollbar. By adding scrolling="no" and frameBorder="0" to the embed code, you can remove these elements. Note: If you dispense with the gallery's scrollbar, ensure the height is set so that any control buttons remain visible.

For the video to fit the webpage size, simply append "?fluid=true" to the iframe URL.

<iframe src="https://my.tikee.io/videos/cc3dc6e1-862b-4132-b563-61c92ce0a60a?fluid=true" style="width: 100%; height: 100%; border: none;"></iframe>

2. Customizing Iframe Colors

You can select the colors for your iframe as follows:

• primary_color: similar to “#090909” but exclude the “#” since it's within a URL.

  • 
    

secondary_color: akin to “#090909” but leave out the “#” as it's part of a URL.

• font_color: comparable to “#090909” without the “#”, due to its use in a URL.

Integrate these parameters just as you would with any URL's query parameters:

https://my.tikee.io/time_lapses/{...}/photo_gallery/{...}?lang=en&primary_color=5f9ea0&secondary_color=ff9800&font_color=db0b93

In its entirety:

<iframe src="https://my.tikee.io/time_lapses/{...}/photo_gallery/{...}?lang=en&primary_color=5f9ea0&secondary_color=ff9800&font_color=db0b93" allowfullscreen style="width: 100%; height: 100%; border: none" ></iframe>

3. Choosing Viewer Types in the Iframe

Select the viewer types for your iframe as such:

• default_tab: options include “single”, “compare”, “immersive”

  • single: standard panning mode

  • compare: before-and-after comparison view

  • immersive: enveloping view with reprojection capabilities

  • allowed_viewer_types: list options such as “single”, “compare”, “immersive” separated by commas

Note: These parameters must be used together; “allowed_viewer_types” cannot function without “default_tab”.

https://my.tikee.io/time_lapses/{...}/photo_gallery/{...}?lang=en&default_tab=immersive&allowed_viewer_types=single,compare,favorite,video

Summarized:

<iframe src="https://my.tikee.io/time_lapses/{...}/photo_gallery/{...}?lang=en&default_tab=immersive&allowed_viewer_types=single,compare,favorite,video" allowfullscreen style="width: 100%; height: 100%; border: none" ></iframe>

4. Hiding Download Buttons

Conceal the download buttons in your iframe in this manner:

• hide_downloads: specify “true” or “false”

https://my.tikee.io/time_lapses/{...}/photo_gallery/{...}?lang=en&hide_downloads=true

As a whole:

<iframe src="https://my.tikee.io/time_lapses/{...}/photo_gallery/{...}?lang=en&hide_downloads=true" allowfullscreen style="width: 100%; height: 100%; border: none" ></iframe>

5. Choosing the Language

Select the language for your iframe viewer by adjusting the “lang” parameter; the acceptable values are “en” and “fr”.

Customizing the iframes for your Tikee timelapse projects is a straightforward process that empowers you to manage the look and functionality of your galleries on your website. By tweaking dimensions, colors, viewer options, and other settings, your timelapse content can be integrated with ease into your online communications approach.

For additional details about the Tikee solution and its uses, please visit our website.