Implement video player
You can integrate the video player into your website using an HTML code. To make the video fully accessible, you will need the following additional files alongside your video:
- an .mp3 file with the audio description
- an .srt file with the subtitles
- a .txt file with the alternative text
- (optional) an .mp4 file with a signing video
If your video does not have these files, you can create them in Scribit.Pro's editor. From our editor and your own dashboard, you can then easily embed the files, and the HTML code will be generated automatically. All you have to do is paste it into your website.
The HTML code for the video player
Do you only want to use the video and do you already have the additional files available? Then use the iframe below to be able to place your video in our accessible player on your website.
<iframe scrolling=”no” frameborder=”0″ data-resize allowfullscreen=“true” src=”https://video-player.Scribit.Pro/?video=fill in the url to your video &subtitles=vill in the url to your subtitles&audioDescription=ill in the url to your audiodesciption&videoDescription=ill in the url to your signlanguage video in&alternativeText=ill in the url to your alternative text&thumbnail=ill in the url to your thumbnail&skin=2″ style=”width:ill in the width of your iframe;” data-resize allowfullscreen=”true” ></iframe>
After uploading the required media to your website or CDN, you can embed it in the <iframe>. To do this, replace the underlined text with the links to your media so that they are loaded into the video player. For the number of the skin, enter 1 or 2 to choose one of the two Scribit.Pro-skins. For the desired width, enter the width you want to make the player. This may be done in pixels (e.g., 800 px) or a percentage (e.g., 50%).</p>
Using this code, the height automatically adjusts to the size of the video and the width you have set. The height will also adjust automatically when the user collapses or expands the alternative text. To do this, you need to add the following line of code to your html source code. Please note: you only need to add this rule once, even if you <iframe>put multiple lines on your web page. For example, put it in the <head>.
<script defer src=”https://video-player.Scribit.Pro/iframe-resize.js”></script>
Examples Iframes
You can choose from different styles for the player. In the HTML code, display the preference as skin=1 or skin=2
Below is an example of the versions:
Your video accessible with Scribit.Pro
From our editor and your own dashboard, you can then easily embed the files, and the HTML code will be generated automatically. All you have to do is paste it into your website. If you want to know how that works, read the explanation on embedding.