Heb je ooit wel eens de behoefte gehad om een andere website op jouw website weer te geven, zonder dat je bezoekers daarvoor je website moeten verlaten? Wel, dat is mogelijk, namelijk met behulp van iFrames. In dit artikel vertellen we alles dat je moet weten over het gebruiken van iFrames in WordPress.
Wat is een iFrame?
Een iFrame is een zogeheten ‘inline’ frame dat gebruikt wordt om een HTML bestand in een webpagina te laden. Zo’n HTML document mag bijvoorbeeld ook JavaScript en/of CSS bevatten.
De kans is groot dat je al eens iFrames hebt gebruikt. Het meest voorkomende voorbeeld van een iFrame embed code is de embed code van YouTube video’s, die er ongeveer zo uit ziet:
<iframe width="420" height="315" src="https://www.youtube.com/embed/sZcW0ougNYI" frameborder="0" allowfullscreen></iframe>
Als je naar het bovenstaande voorbeeld kijkt, zie je dat de iframe tag de YouTube videospeler laadt met de video ID die in de code staat. Er worden ook andere parameters aangegeven, waaronder de hoogte, de breedte en de dikte van de rand om de videospeler. Deze parameters kun je uiteraard zelf aanpassen, zolang je maar zorgt dat de URL naar de video klopt.
Bij ‘gewone’ websites zie je, als je de embed code in de body van je HTML zet, aan de voorkant de YouTube video op de juiste plek. Maar bij WordPress websites werkt dat net even anders.
iFrames in WordPress
De iFrame HTML tags zoals in het voorbeeld hierboven, worden door WordPress automatisch verwijdert. Dat is expres gedaan, om veiligheidsredenen. Hackers willen iFrames namelijk nog al eens als ‘achterdeurtje’ gebruiken. Maar dat de iFrame HTML tags worden verwijdert, betekent gelukkig niet dat je geen iFrames in WordPress kunt toevoegen.
Als je content van YouTube, Vimeo, SoundCloud, Twitter of SlideShare via een directe link in je WordPress site wil zetten, dan kun je hiervoor de iFrame plugin gebruiken. Het is echt heel simpel: je installeert en activeert de plugin en kunt vervolgens een iFrame shortcode gebruiken. Die ziet er dan zo uit:
[ embed ] https://www.youtube.com/embed/sZcW0ougNYI [ /embed ]
De iFrame plugin is de meest simpele plugin om iFrames in WordPress te gebruiken. Heb je echter behoefte aan wat meer mogelijkheden, dan zijn er nog een aantal geavanceerde plugins beschikbaar. Hier zullen we morgen verder op in gaan!
Goede middag,
Ik heb de volgende code toegevoegd aan een product:
Simpelweg een Youtube video met een bepaalde hoogte en breedte en gezorgd dat er geen alternatieve video’s weergeven worden naar afloop, alleen video’s van hetzelfde kanaal.
Deze code is toegevoegd op de volgende pagina: https://www.letsleds.nl/product/led-spot-kantelbaar-5watt-rond-nikkel-dimbaar/
Maar helaas verdwijnt de video naar verloop van tijd (lijkt uit het niets of als er iets aan het product bewerkt wordt).
Ik heb ook al geprobeerd de video in te voegen met de volgende code: [embed width="750" height="422"]https://www.youtube.com/embed/J4bDPeVh46E[/embed]
Maar dan worden alternatieven video’s van totaal willekeurige onderwerpen weergeven wat wij graag uitgeschakeld zien.
Graag verneem ik wat ik over het hoofd zie en hoe dit op te lossen.
Met vriendelijke groet,
Jens van den Wijngaard