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 audiodescriptie en transcripten te 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> 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 codeVideos 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 vindt. Wel adviseren we je de toetsenbordondersteuning expliciet 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
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.
Een voorbeeld hoe dit met React en TypeScript kan werken is dan als volgt:
import React, { useRef, useEffect } from "react";
// a custom type in our CMS, use whatever you have aviailable
// the gist is that we're providing the raw embedded HTML snippet from the trusted CMS
type YoutubeVideoProps = {
embedHTMLCode: string;
};
export default function YoutubeVideo({ embedHTMLCode }: YoutubeVideoProps) {
const ref = useRef<HTMLDivElement>(null);
useEffect(() => {
if (ref.current) {
// once we have a reference to the DOM element, we can ask the widget to scan it
window.scribitWidget?.scan(ref.current);
}
}, [ref]);
return <div ref={ref} dangerouslySetInnerHTML={{ __html: embedHTMLCode }} />;
}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.
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