Player Embed code
Use the following iframe code to load your video in a website. There are two variables in the src that needs to be specified to make it work.
<iframe
src="https://player.vdocipher.com/v2/?otp=[[REPLACE_WITH_OTP]]&playbackInfo=[[REPLACE_WITH_PLAYBACKINFO]]"
style="border:0;width:720px;height:405px"
allow="encrypted-media"
allowfullscreen
></iframe>
Understanding the above code:
| variable | description |
|---|---|
OTP and playbackInfo | These are obtained from either API or from the dashboard. They are meant to identify the video and provide access to view the video. It is generated by your backend application after verifying access. Learn more about how and why to generate OTP here. |
allow="encrypted-media" | This is required to play encrypted video in Chrome based browsers. It is not required on Firefox. The allow attribute is a relatively new addition to the web specifications and sometimes an old HTML editor might remove it mistakenly. |
allowfullscreen | required for the full screen button to work. |
style= | This part is a suggested style for the video player. The height and width mentioned here are assuming a 16:9 aspect ratio. Feel free to modify these values to match your video and your websites aesthetics and layout. Also read the responsive section below. |
Further more parameters can be passed in the url along with otp and playbackInfo see the Configuration options
Making it responsive
Responsive design means different things for different websites. That is why we give this control to you. Here is how the most common responsive embed will look like.
<div style="padding-top:52.73%;position:relative;">
<iframe
src="https://player.vdocipher.com/v2/?otp=_____&playbackInfo=______=="
style="border:0;max-width:100%;position:absolute;top:0;left:0;height:100%;width:100%;"
allowfullscreen="true"
allow="encrypted-media"
>
</iframe>
</div>
Here the padding-top is a workaround for setting known aspect ratio to the player. If you are targeting modern browsers only, you can use CSS's aspect-ratio property which works better. 56.25% is obtained by percentage of 9/16 if the aspect-ratio is 16:9.
The max-width property makes the player takes up as much of the width as is available. If you have a vertical video, it will look better to change the style to accommodate for that.
About player versions
As part of the iframe src, you will notice a v2 after the hostname. This is the version of the player which will be loaded. Check our changelog to see the list of versions that we have released so far.
Recommended ✅
https://player.vdocipher.com/v2/
The player is available also as v2.x and v2.x.x for each version release.
As we release new versions, v2 and v2.x player scripts will get updated
to reflect the latest in their series.
We will follow the semantic versioning patterns. v2.5.3 means the 2, 5 and 3 are major, minor and patch segments of the version number. Major version is updated when there is a breaking change. Minor version is updated when there are new APIs added. Patch version is updated when the change is all internal and does no outside change.
Setting the player version to v2 means that you will get all the updates in the v2.x.x series. So, the player script will update automatically to reflect the latest version. If you set the player version to v2.3 like below, you will receive updates of v2.3.x series. As long as the minor version is not updated, you will continue to receive changes.
NOT Recommended ❎
https://player.vdocipher.com/v2.3/
https://player.vdocipher.com/v2.3.15/
It is recommended to not specify exact version so that you can receive updates automatically.
We try our best to ensure that breaking changes do not happen. But using the API
means that there are always unique combinations of situations in which these
methods and events can be used. We strongly suggest staying with v2 directly
if you are using separate iframe embeds for each page because it is difficult to
update each page. Even for API embeds, it is safe and better to stay with v2.
The option to specify exact versions is available in case you want greater stability at the cost of the slow updates. If you go with this option, you will have to manually update the version number wih each update. There is a changelog that you can access to know the changes that are coming in each version update.
In case of security issues or critical browser incompatibility which results in video not being able to play, we can publish update directly to existing player versions.