Implementation widgetAccessible VIMEO and YouTube videos

Onze Vimeo- en YouTube widget is gemakkelijk te plaatsen op je eigen website. Deze widget werkt alleen op de embedded video’s die op je website staan als je audiodescriptie hebt toegevoegd in scribit.pro. 

Implementation instructions

Plaats het onderstaande <script>-codefragment in de <body>-tag van de HTML-uitvoer van je webpagina, zo dicht mogelijk bij de closingtag </body>

Do you use WordPress? Then install the plug-in ‘Head & Footer Code’ on your WordPress website. Subsequently, you can enter the code fragment in the input field ‘FOOTER Code’ in the settings of the plug-in. The plug-in will ensure that the fragment is placed in the footer of each page.

Is your website static? Then you must edit the source code to ensure that the fragment is inserted in the proper place.
Let op: Het fragment moet op elke pagina staan waar je YouTube-video’s toegankelijk wil maken. Het verschilt per website-implementatie of dat op 1 locatie is in te regelen of dat het op meerdere plaatsen moet. De ontwikkelaar van jouw website kan je daarmee helpen.

Responsive embedding

Veel websites gebruiken responsive insluitingen, wat ervoor zorgt dat video’s zichzelf automatisch aanpassen aan een specifieke scherm- of venstergrootte. In de meeste gevallen gebruiken websites een parent/wrapper-element dat ervoor zorgt dat de video zijn verhouding behoudt.

These wrapper elements can prevent the widget from being displayed (correctly). However, the widget can be configured to support such wrapper elements. To configure a responsive wrapper, you can add a CSS selector as wrapper attribute to an object as the second argument in the widget constructor.

If you use such wrappers, you can enter a CSS selector on the widget code page of the Dashboard, after which the code fragment will automatically adapt to support the specified wrapper.

<script type=”text/javascript”>
(function(s, w, i, d, g, e, t) {
    s[‘initScribitWidget’] = function(){s[‘scribitWidget’] = new s.scribit.widget(g)}
    e = w.createElement(i); e.type=’text/javascript’; e.src = d; e.defer = true;
    t = w.getElementsByTagName(i)[0]; t.parentNode.insertBefore(e, t);
})(window, document, ‘script’, ‘https://widget.scribit.pro/main.js‘, ‘xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx’;
</script>

Dit codefragment wordt specifiek gegenereerd voor jouw account. Daarbij worden de xxx-en in de code vervangen voor jouw ID-code. Deze is bekend bij scribit.pro. Onder het hamburger menu van je dashboard vind je onder het kopje YouTube-widget jouw specifieke code.

To show it, you must enhance it

The extra bar below your video only works for videos that have been made accessible while logged into your scribit.pro account. Furthermore, the videos must have been downloaded at least once, to prepare them for use in the widget.

Player embedding

Bij het insluiten van YouTube-video’s, zal de URL in het src attribuut aangepast moeten worden. Hier moeten de volgende query parameters toegevoegd worden: enablejsapi=1&disabledkb=1&playsinline=1

To function fully on mobile devices, the query parameter playsinline=1 will also need to be added. In addition, it is necessary to remove the picture-in-picture option from the allow attribute.

The embed code will then look as follows:

<iframe src=”https://www.youtube.com/embed/abc1235GHJ?enablejsapi=1&playsinline=1&disablekb=1″ frameborder=”0″ allow=”accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope” allowfullscreen=”O”></iframe>

No bar visible?

Mocht je geen balk zien of zijn de knoppen niet zichtbaar, dan kan dit verschillende oorzaken hebben:

  • Het <script> code fragment is niet in je website of op de pagina geplaatst
    Solution: Add the option(s) now.
  • The embed code does not yet contain the ‘enablejsapi’ and/or ‘playsline’ option.
    Solution: Add the option(s) now.
  • Er is geen ‘AD’-knop zichtbaar
    Solution: No audio description has been created in scribit.pro. Do so now.
    Or: The file may not have been downloaded yet. Download it again to be sure.
  • The video was not described while logged in to the associated account.
    Oplossing: Laat scribit.pro weten onder welk account de video is beschreven en welk account gekoppeld is aan de website. Wij kunnen de video voor je verplaatsen zodat hij wel zichtbaar wordt.

Advanced implementation

In sommige gevallen kunnen video embeds op je website dynamisch geladen worden. In deze gevallen moet de widget handmatig aangeroepen worden om de dynamisch gewijzigde DOM veranderingen te doorzoeken op video embeds.

The scan function of the widget can be triggered as follows:

window.scribitWidget.scan(element);

Here parameter "element" must be an HTML element that the widget can search.

Can't figure it out? 

Then make sure to contact us via support@scribit.pro.

Skip to content