De Scribit.Pro widget

Verrijk automatisch jouw Youtube en Vimeo insluitingen (embeds) met onze widget. Een eenmalige, laagdrempelige installatie dat ervoor zorgt dat jouw insluitingen automatisch audio descripties en tekst-alternatieven ondersteunen.

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. Voorbeelden van video's met de Youtube widget vind je op deze pagina.

Om dit te implementeren op je eigen website dien je een aantal stappen te doorlopen.

Voeg eenmalig de javascript code toe aan je website
Upload je YouTube-video in jouw dashboard van Scribit.Pro en beschrijf de video met audiodescriptie en ondertiteling
Download eenmalig de bestanden, dit is voor ons systeem het sein dat je klaar bent.
Embed de YouTube of Vimeo- video op je website (let op de extra spelregels hieronder)

Javascript code toevoegen aan je website

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

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.

<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', '//widget.scribit.pro/main.js', 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx');
</script>

Dit codefragment wordt specifiek gegenereerd voor jouw account. Log in om de xxx-en te vervangen voor jouw Scribit ID

Responsive insluitingen

Veel websites sluiten videos in die zichzelf automatisch aanpassen aan de beschikbare scherm- of venstergrootte. Wanneer dit voor jouw website ook het geval is kan het voorkomen dat de widget niet correct wordt weergegeven. Dit is veelal op te lossen door de widget te instrueren zich op een bovenliggend element van de insluiting te positioneren. Onderstaand is een voorbeeld hoe de widget code een extra configuratie optie ontvangt voor deze positionering. Je kan de `div` vervangen voor elke andere CSS selector.

<script type="text/javascript">
    (function(s, w, i, d, g, e, t) {
        s['initScribitWidget'] = function(){s['scribitWidget'] = new s.scribit.widget(g, {'wrapper': 'div'})};
....restant widget code

Videos insluiten

Extra spelregels voor een optimale toegankelijke ervaring!

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

Vimeo insluiting

Het insluiten van Vimeo videos werkt direct met de insluitcode die je op de vimeo website vind. Wel adviseren we je de toetsenbordondersteuning expliceit uit te schakelen. Dit kan door de parameter `keyboard=0` toe te voegen aan de code die je plaatst op je website.

Bijvoorbeeld:

<iframe src="https://player.vimeo.com/video/224296335?h=4333112b93&title=0&byline=0&portrait=0&keyboard=0" width="640" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>

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.

Geavanceerde implementatie

Tips voor webontwikkelaars

Gebruik je WordPress?

goed nieuws! We hebben een WordPress plugin die het mogelijk maakt videos toegankelijk te publiceren zonder handmatige codes of kopieeërhandelingen. Zie hiervoor onze WordPress plugin pagina op https://scribit.pro/wordpress-plugin.

Single Page Applications

In sommige gevallen kunnen video embeds op je website dynamisch geladen worden. In deze gevallen moet je de widget (opnieuw) aansturen om te zoeken naar videos. Dat kan als volgt:

window.scribitWidget.scan(element);

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

Eerste hulp bij problemen

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 nog geen audiodescriptie gemaakt in Scribit.Pro
Oplossing: Zorg dat je dit alsnog doet
De audiodescripties zijn nog niet gedownload
Oplossing: Download voor de zekerheid de audiodescripties 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.

A canvas image which illustrates a marketing promotion announcement

Kom je er niet uit?

Neem dan vooral contact met ons op

Klaar voor toegankelijk publiceren!

Schrijf je in op onze nieuwsbrief en blijf op de hoogte