Implementatie widgetvoor toegankelijke VIMEO en YouTube video’s

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. 

Implementatie instructies

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

Gebruik je WordPress? Installeer dan plugin ‘Head & Footer Code’ in je WordPress website. Daar kun je het codefragment plaatsen in het invoerveld ‘FOOTER Code’ van de instellingen van de plugin. De plugin zorgt dan dat het fragment op elke pagina in de footer staat.

Heb je een statische website? Dan dien je er middels het aanpassen van de broncode voor te zorgen dat het fragment juist geplaatst wordt.
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 insluitingen

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.

Dit soort wrapper-elementen kunnen ervoor zorgen dat de widget niet (correct) wordt weergegeven. De widget kan zodanig geconfigureerd worden om dergelijke wrapper-elementen te ondersteunen. Om een responsieve wrapper te configureren, kan je een CSS selector als wrapper attribute in een object meegeven als tweede argument in de widget constructor.

Als je gebruik maakt van dergelijke wrappers, kan je op de pagina van de widget code in het dashboard een css-selector invullen, waarna het codefragment zich zal aanpassen om met de opgegeven wrapper te werken.

<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.

Om te tonen moet je wel verrijken

De extra balk onder je video werkt alleen voor video’s die onder jouw account toegankelijk zijn gemaakt op scribit.pro. Als je dit gedaan hebt dien je de bestanden van de video’s tenminste 1 keer gedownload te hebben, zodat deze gegenereerd zijn voor gebruik in de widget.

Speler insluiting

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

Voor een volledige werking op mobiele apparaten zal de query parameter playsinline=1 ook toegevoegd moeten worden. Daarnaast is het nodig om de picture-in-picture optie uit de allow attribute te halen.

De embedcode ziet er dan als volgt uit:

<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>

Geen balk te zien?

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
    Oplossing: Zorg dat je dit alsnog doet
  • De embed code is nog niet voorzien van de ‘enablejsapi’ en/of ‘playsline’ optie
    Oplossing: Zorg dat je dit alsnog doet
  • Er is geen ‘AD’-knop zichtbaar
    Oplossing: Er is geen AD gemaakt in scribit.pro, dit kun je alsnog doen
    Of: Het bestand is wellicht nog niet gedownload, doe het voor de zekerheid nog een keer
  • De video is niet beschreven onder het gekoppelde 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.

Geavanceerde implementatie

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.

Hierbij kan de scan functie van de widget als volgt aangeroepen worden:

window.scribitWidget.scan(element);

Hierbij moet parameter ‘element’ een HTML-element zijn welke de widget kan doorzoeken.

Kom je er niet uit? 

Neem dan vooral contact met ons op via support@scribit.pro.

Skip to content