✅ Hoe YouTube-video in te voegen met automatisch starten en geen geluid

Inhoudsopgave

In deze tutorial ga ik het je leren hoe u een YouTube-video op uw webpagina invoegt die automatisch start bij het laden van een pagina en geen geluid heeft. Hiervoor gaan we de API van Youtbe gebruiken. We zullen code in JavaScript moeten schrijven, heel weinig eigenlijk, laten we beginnen.

Stap 1
Het eerste dat we moeten doen, is de ID van de video die we willen uploaden. Hiervoor gaan we YouTube in en zoeken naar de gewenste video, de id hiervan komt van v = binnen de URL, in de volgende afbeelding laat ik je een voorbeeld zien:

Nu kunnen we het script aan onze pagina toevoegen, hieronder leg ik enkele details uit om rekening mee te houden.

Stap 2
We hebben een spatie in onze HTML nodig waar we de speler kunnen toevoegen, hiervoor gebruiken we een div, die instructie in de code is deze (de id is nodig voor de functie die we gebruiken van de API):

Je kunt de gewenste id invoeren, als je deze wijzigt, merk op dat in de code in stap 4 deze ook verschijnt bij het aanmaken van de speler, je zult deze ook moeten wijzigen, aangezien deze via de id naar deze div verwijst.

Stap 3
We koppelen de YouTube API aan onze pagina, hiervoor schrijven we de volgende instructie:

Merk op dat dit een asynchrone belasting is.

Stap 4
We voegen enkele scripttags toe (aan het einde van de body zelf), daarin zullen we de functie maken opYouTubeIframeAPIReady (). De naam van de functie moet je zo laten. Binnen deze functie zullen we de breedte, de hoogte van de speler, de ID van de video en nog wat meer kenmerken configureren.

[kleur = # a9a9a9] Code met Youtube API [/ kleur]

Enkele inzichten

De video-ID moet worden ingevoerd in videoId.

Voor automatisch starten wordt gebruikt automatisch afspelen, 1 zal zijn dat het alleen begint, als u 0 invult, zal het niet.

Om het te dempen, wordt de volgende functie gebruikt binnen het evenementengebied:

 onReady: functie (e) {e.target.mute (); }

U kunt ook het aantal keren configureren dat de video wordt herhaald (lus), als de bedieningselementen worden weergegeven, zoals afspelen, volume, enz.

Hier is de volledige code:

Bij het openen van het bestand met de bovenstaande code, verschijnt de speler, zoals te zien is in de volgende afbeelding:

VERGROTEN