hbs_lat en de fi id nl nl nl nl nl en en nl nl en en nl nl nl en en nl en en nl nl en en nl it nl nl nl en en nl nl nl fi en nl nl en en nl nl nl nl nl nl nl nl nl nl en nl nl en nl nl nl nl nl en nl en nl en nl en nl en nl en nl az nl en nl fr nl mk nl nl nl hi fi br br en fi fi fi fr fi fi fi en fi br br en fi fi fi nl en en en en en nl nl nl nl nl nl nl nl nl nl nl nl nl en nl fr en nl it pl en it de en en en nl en nl en en en en nl en en en ca nl en en en nl en nl en nl
Domeinnaam Je adres op internet met extensies als .nl & .com. Mail Professioneel e-mailen met je eigen domein – veilig en reclamevrij. Mailarchivering Automatische en veilige archivering voor je bedrijf.
SSL-certificaten Bescherm je website optimaal dankzij versleuteling Microsoft 365 Je documenten altijd bij de hand met Office 365.
Websites voor beginners en professionals.
Sitebuilder Perfect voor beginners: zonder voorkennis je eigen website. Webshop Snel en professioneel online verkopen.
Snel, veilig en krachtig: hosting & WordPress van professionals voor professionals.
WordPress hosting In een handomdraai je eigen, veilige WordPress site. Hosting Perfect voor professionele en supersnelle websites. Hosting Mini Ons mini-hostingpakket – voor een mini-prijs.
WooCommerce Je eigen webshop maken met WordPress
Monitor het succes en verbeter de performance van je website
STRATO marketingRadar Het perfecte starterspakket voor online marketing. STRATO rankingCoach Snel en simpel een toppositie in zoekmachines als Google. STRATO listingCoach Verschijn met één klik in de belangrijkste online directory's.
STRATO adCoach Maak en beheer eenvoudig Google Ads-campagnes.
Sneller gaat niet: 100% merk-hardware voor virtual en dedicated systemen.
VPS Linux Krachtige Linux VPS met SSD-power & Plesk. VPS Windows VPS met véél RAM & Windows Datacenter-licentie. Cyber Protect Veiligheid dankzij professionele back-ups & anti-malware
Dedicated Server Linux Eigen hardware met root-rechten – voor veeleisende hosting. Dedicated Server Windows Merk-hardware met Administrator-toegang. ServerCloud Flexibele, schaalbare servers in de cloud.
Bestanden online opslaan & automatisch back-uppen naar de Europese cloud.
HiDrive Sla je bestanden op in de Europese cloud. HiDrive Business Veilig teamwork met je online harde schijf. HiDrive S3 De object storage voor je bedrijfsdata.
Cyber Protect Veiligheid dankzij professionele back-ups & anti-malware
Met HTML een video op je site insluiten of voor een embedded YouTube video kiezen?
Met HTML een video insluiten
Externe videoplatformen en HTML5 maken video’s integreren eenvoudiger
HTML5: video plaatsen made easy
Via platformen als YouTube een embedded video op je site plaatsen
YouTube embedded video insluiten: zo doe je het stap voor stap
Externe videoplatformen en HTML5 maken video’s integreren eenvoudiger
Audiovisuele inhoud trekt de aandacht en wordt niet alleen door de bezoekers van je site gewaardeerd. Ook zoekmachines zien de meerwaarde van multimedia-content. Video’s maken het mogelijk om informatie te verstrekken op een originele manier. Bovendien kunnen producten en diensten gedetailleerder worden gepresenteerd dan met enkel teksten en foto’s. Een video op je site zetten of embedden werd lange tijd gezien als een ingewikkelde klus. Om de multimedia-inhoud te kunnen tonen, moesten de juiste browserplug-ins (bijvoorbeeld Adobe Flash Player) en andere tools handmatig op de computer worden geïnstalleerd en regelmatig worden geactualiseerd, wat vaak incompatibiliteit en gaten in de beveiliging tot gevolg had. Aanbieders van video’s werden bovendien met ingewikkelde insluitingscodes geconfronteerd wanneer ze een video wilden insluiten en hadden moeite om de video’s in de benodigde formats (bijvoorbeeld SWF) te converteren. Echter, de vijfde versie van de Hypertext Markup Language (afgekort HTML) biedt een native element waarmee video’s als volwaardige webinhoud in de sitecode kunnen worden geïntegreerd. Het is ook mogelijk de videohosting, naast de webhosting, aan aanbieders als YouTube of Vimeo uit te besteden. Op deze pagina leggen we uit hoe je met HTML een video op je site plaatst, en hoe je dit doet via een extern videoplatform.
HTML5: video plaatsen made easy
Met HTML5 is een video op je site plaatsen kinderspel. Alles wat je voor een embedded video nodig hebt, is het native element video, dat met optionele attributen kan worden uitgebreid. De volgende programmacode toont hoe je videobronnen aan de broncode van je site toevoegt:
Deze video kan niet worden weergegeven in uw browser.
Een downloadversie staat klaar onder  linkadres .
Het video-element in het voorbeeld bevat de URL naar de videobron (src="voorbeeld.mp4") en de optionele attributen width, height, controls en poster, die definiëren hoe de video op je site wordt weergegeven. De tekst die tussen de inleidende en de afsluitende tag van het video-element staat, wordt alleen getoond als een browser de video niet kan weergeven. Sitebeheerders gebruiken deze functie normaal gesproken om een alternatieve beschrijving en een downloadlink naar de bron aan te bieden.
Optionele attributen van het HTML5-video-element
Wanneer een bron met het video-element wordt ingesloten, moet deze de link naar de bron bevatten; ofwel als src-attribuut, ofwel in een kindelement source. Bovendien kan het video-element worden uitgebreid met de volgende attributen:
De attributen width en height maken het mogelijk om de afmetingen van je embedded video precies aan te geven. Wanneer deze informatie ontbreekt, maakt het video-element gebruik van de afmeting van het videobestand. Als je slechts een van beide attributen instelt, past de browser bij vertoning de beeldverhouding automatisch aan.
Met het attribuut controls activeer je het native controlepaneel van de webbrowser. Eventueel kunnen ook eigen besturingselementen met JavaScript worden gedefinieerd.
Het attribuut poster gebruik je om naar een afbeelding te verwijzen die als miniatuurafbeelding voor de video wordt getoond. Wanneer dit attribuut ontbreekt, wordt het eerste frame van de video gebruikt voor de miniatuurafbeelding.
Met het attribuut autoplay geef je de webbrowser de opdracht om video’s na het openen van de site automatisch te starten.
Wanneer je het attribuut loop gebruikt, wordt de video steeds herhaald.
Met het attribuut muted wordt de video zonder geluid afgespeeld.
Het attribuut preload geeft aan de browser door in hoeverre het videobestand bij het downloaden van de site moet worden geladen. Je hebt de keuze uit drie waarden: bij auto wordt het hele bestand geladen, bij metadata worden alleen metabestanden geladen en de waarde none verhindert het laden van videobestanden.
De actuele versies van de meest gebruikelijke webbrowsers ondersteunen HTML5. Om de video-inhoud op je site ook toegankelijk te maken voor gebruikers die technisch niet up-to-date zijn, maken tekstlinks in het video-element het mogelijk om afzonderlijke downloadgegevens aan een video te koppelen. Wie in plaats van de video de alternatieve tekst te zien krijgt, kan er zo voor kiezen om de video op je site te downloaden en in de eigen lokale mediaplayer te bekijken.
De HTML5-specificatie definieert het video-element en de bijbehorende programmeerinterface (application programming interface, API), maar maakt geen criteria voor videocodering. Bij het kiezen van het videoformaat stuiten sitemakers daarom op problemen. De gangbare videoformaten WebM, OggTheora en H.264/MPEG4 hebben allemaal voor- en nadelen; daarom kunnen de ontwikkelaars van marktleidende webbrowsers het tot op heden niet eens worden over een gemeenschappelijke standaard. Terwijl Internet Explorer en Safari zich in de eerste plaats richten op het formaat H.264/MPEG4, een formaat waarvoor sitemakers moeten betalen en dat sinds 2013 bijna overal beschikbaar is, ondersteunen de webbrowsers Firefox, Chrome en Opera ook gratis formaten zoals Ogg Theora en WebM.
MP4 (MPEG4-bestanden met H.264-videocodec + AAC-audiocodec)
WebM (WebM-bestanden met VP8/VP9-videocodec + Vorbis-audiocodec)
Ogg (Ogg-bestanden met Theora-videocodec + Vorbis-audiocodec)
Om incompatibiliteit te voorkomen, is het raadzaam om video’s in verschillende formaten te maken. Het video-element staat hiervoor verschillende videobronnen toe, door het kindelement source in te sluiten en het met het attribuut type voor de webbrowser te onderscheiden:
Wanneer alternatieve source-elementen met een type-attribuut in het video-element worden geplaatst, kiest een browser tijdens het laden van een site automatisch het juiste videoformaat. Let er daarbij op dat het video-element bij deze wijze van insluiten geen src-attribuut met bron mag bevatten.
Via platformen als YouTube een embedded video op je site plaatsen
Wie video’s niet via de eigen server wil aanbieden maar de videohosting aan een externe dienstverlener wil uitbesteden, heeft bij platformen zoals YouTube en Vimeo de mogelijkheid om het videomateriaal gratis te uploaden en clips met een insluitingscode in de eigen site te integreren.
Omdat populaire videoplatformen garanderen dat je inhoud compatibel is met de gebruikelijke webbrowsers, worden de formaten van deze aanbieders op de meeste computers ondersteund. Outsourcing van video’s heeft bovendien het voordeel dat de eigen server niet extra wordt belast door het streamen. Sitebeheerders moeten zich wel eerst verdiepen in de gebruiksvoorwaarden van de videohosting en de insluitingscode op basis hiervan aanpassen.
YouTube embedded video insluiten: zo doe je het stap voor stap
Een YouTube-video op je site plaatsen, doe je als volgt:
Stap 1: Open de betreffende YouTube video die je wilt insluiten
Stap 2: Klik op DELEN onder de video
Stap 3: Klik op INSLUITEN
Stap 4: Neem de html video-code over uit het menu, deze kun je plakken op je site of blog
Stap 5: Voer in deze code ook de instellingen in die je wenst omtrent de afmetingen van de video die je wilt embedden en activeer hier de videotitel