Contents:
Overview
To embed your Smartzer project, first click on the share tab in the top right corner of your project. Here you will see a range of options for how you can share your project.
Ways Smartzer Player Can Look On Your Website
Smartzer’s player can be embedded in multiple formats, these are as follows
Inline
Embedding your player inline means your video sits directly on your website, inline with all the other elements on the page. Here is an example of portrait and landscape Inline embedding. This can be achieved using both the SDK and Iframe examples below.
Lightbox
Embedding your player in a lightbox will place an image on your webpage which will launch a fullscreen overlay when clicked, in which your player will be visible. One of the benefits of using a lightbox is that a user will always see the player as large as it can be, providing the best end-user experience.
Here is an example of a lightbox embedding.
** Please note only embedding via SDK or Playlist will allow you to utilise the lightbox feature. **
Direct
If you cannot or do not want to embed the video on your website we offer the URL distribution method. Using this will provide you with a direct URL link to the player, this is hosted by Smartzer and is a fullscreen view of your project. To use this, firstly, select the URL option on the left of the share area.Add distribution settings if these are relevant to your project.
Then copy the link at the bottom of the share tab. Anyone who visits this link will view your project as a player that fills their web browser screen.
Embedding:
Via iFrame
To embed via iFrame (which is one of our Inline solutions), select ‘Embed - iFrame’ on the left of the share area. Add distribution settings if these are relevant to your project.
We recommend setting the Width to 100% and the Height around 650px -750px. The absolute minimum size you can embed for shoppable video is 350px x 350px and for live stream 350px x 450px. Provided the container the iframe is embedded within is responsive to desktop and mobile screen sizes, the player will adjust automatically to the screen size it is opened on.
Finally, copy the second code section, and place this in the relevant place depending on where you would like the player to appear on your page.
If you would like to have ‘add to cart’ functionality, please refer to this article in our documentation.
Via SDK
To use the embed SDK, select ‘Embed - SDK’ on the left of the share area. Add distribution settings if these are relevant to your project.
Next copy the script code, and place it anywhere on the page you wish to embed the player on. We recommend placing it at the top of the page between the <head> and </head> tags. This only needs to be there once.
Finally copy the second code section, and place this in the relevant place depending on where you would like the player to appear on your page.
If you would like to have ‘add to cart’ functionality, please refer to this article in our documentation.
Playlist
You can also embed your project within a Smartzer Playlist. To do this, click on ‘Playlist’ on the left hand side of the share area. Select the playlist you would like to add the project to, and click ‘add’. You can also edit this playlist by clicking the ‘edit’ button.
Alternatively, you can create a new playlist by clicking on the plus in the top right corner.
For details on how to embed a playlist on your website, please read the steps within this article.