Embedding Optio Dentistry on your website
In this article:- Embedding the Optio Dentistry video library using JavaScript
- Embedding the Optio Dentistry video library using PHP
- Embedding a single video
- Linking to a lightbox video player
- Changing the language
- Embedding Optio Kids Zone
It's easy to add Optio Dentistry videos to your dental website. Find out how to embed the video library, a single video with or without the Lightbox function and how to customize the language options for your patients.
Embedding the Optio Dentistry video library using JavaScript
First include the Optio JavaScript API by adding the following line inside the <head> section of the website HTML.
<script src="https://www.optiopublishing.com/api/js" async defer></script>Then place the following snippet where you would like the video library to appear in your site.
<div class="optio-library"></div>Optional attributes
There are a number of optional attributes that can be used to configure the video library. For example, the following snippet will only include dentistry videos.
<div class="optio-library" data-filter="^dentistry"></div>The following table lists the optional attributes available for the video library.
| Attribute | Default | Description |
|---|---|---|
| data-autoplay | False | Whether to begin playback immediately after the page loads. |
| data-captions | False | Whether to display captions |
| data-filter | None | Regular expression to filter videos based on video ID. |
| data-language | en | Player language. Languages available include English (en), French (fr), Spanish (es) and Hebrew (he). |
| data-video-id | First "featured" video | ID of video initially loaded into player. |
Embedding the Optio Dentistry video library using PHP
If your website uses PHP, the following code can be used to embed the videos server-side giving you an SEO boost. Note: some server configurations may disallow the use of the readfile() function. In this case the JavaScript embed method above should be used.
<?php
readfile(
'https://www.optiopublishing.com/embed/?format=html&url='.
rawurlencode($_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']).
'&q='.rawurlencode($_SERVER['QUERY_STRING'])
);
?>Embedding a single video
First include the Optio JavaScript API by adding the following line inside the <head> section of the website HTML.
<script src="https://www.optiopublishing.com/api/js" async defer></script>The following snippet will embed a single video. It should be placed where you would like to video to appear in your site. This example embeds the Decay: Crown video. Change the data-video-id attribute to display a different video. View a list of video ID's.
<div class="optio-video" data-video-id="dentistry/decay/crown"></div>Optional attributes
There are a number of optional attributes that can be used to configure the video library. For example, the following snippet will include the video library with the language set to French.
<div class="optio-library" data-language="fr"></div>The following table lists the optional attributes available for the video library.
| Attribute | Default | Description |
|---|---|---|
| data-autoplay | False | Whether to begin playback immediately after the page loads. |
| data-captions | False | Whether to display captions |
| data-language | en | Video language. Note that not all content is available in all languages. |
| data-video-id | None | ID of video to load. |
Linking to a lightbox video player
It is possible to create your own links to the videos within a lightbox player. First include the Optio JavaScript API by adding the following line inside the <head> section of the website HTML.
<script src="https://www.optiopublishing.com/api/js" async defer></script>To play a video, use the optio.openLightBox() function passing the identifier of the video to play. For example, the following code will open the Missing Teeth: Bridge video.
<a href="javascript:optio.openLightbox('dentistry/missing_teeth/bridge');">
Watch a video on Bridges
</a>
Changing the language
Subtitles for the Optio Dentistry videos are available in English (en), French (fr), Spanish (es) and Hebrew (he). The default language can be changed by including the optional data-language attribute. For example, the following code will embed the video library with the default language set to French. Please note that not all content is available in all languages.
<div class="optio-library" data-language="fr"></div>Embedding Optio Kids Zone
A page of content just for kids is available. First include the Optio JavaScript API by adding the following line inside the <head> section of the website HTML.
<script src="https://www.optiopublishing.com/api/js" async defer></script>Then place the following snippet where you would like the content to appear in your site.
<div class="optio-kidszone"></div>For further assistance please email us at support@optiopublishing.com