Hvordan å sette på en Multi Video Screen Fra YouTube

Mens andre eiere er å vise enkelt YouTube-videoer på sine websider, kan du omgir dine besøkende med en skjerm full av videospillere. Iframes - små blokker av HTML-kode - gjør det mulig å vise en skjerm full av YouTube-videoer på hvilken som helst nettside. Besøkende kan klikke en video for å vise eller lene deg tilbake og se på som alle videoer på websiden spille automatisk når de besøker nettstedet ditt. YouTube-videoer er gratis, og det tar bare noen minutter å lage din egen personlige Multi Video YouTube-skjermen.

Bruksanvisning

1 Start et tekstredigeringsprogram eller HTML-editor. Åpne et HTML-dokument og legge til koden nedenfor til dokumentets hoveddel:

<Div class = "youtube">
Lim koden for første videoen her
</ Div>

Denne koden skaper en HTML div blokken. Denne blokken vil holde din første YouTube-video.

2 Legg til følgende div blokk under koden vist i forrige trinn:

<Div class = "youtube">
lime inn koden for andre videoen her
</ Div>

Denne koden skaper en annen div blokk som vil holde den andre YouTube-video. Merk at hver div refererer til en CSS-klasse som heter "Youtube".

3 Flytt til dokumentets hodet delen og legg til youtube CSS-klasse til hodet delen som vist nedenfor:

<Style>
.youTube {display: inline;}
</ Style>

Denne CSS-kode setter hver div display attributt til «inline». Å gjøre dette fører til videoene dine til flis horisontalt over på siden. Når en rad fylles opp, flere videoer begynne en andre rad. Hvis du foretrekker nettlesere for å stable videoer vertikalt, erstatte "inline" med "block".

4 Besøk websiden YouTube og dobbeltklikker på en video for å spille den i nettstedets videospiller. Klikk spillerens "Stop" -knappen, og klikk deretter på "Share".

5 Klikk "Embed" og kopiere HTML-koden som vises i tekstboksen som vises. Denne koden består av en iframe container. Iframe URL-attributt peker til nettadressen til videoen på nettet.

6 Gå tilbake til HTML-dokument og lime inn koden du kopierte inn i første div blokk under teksten som leser, "Lim koden for første videoen her." Slett denne teksten etter å lime inn koden i div blokken. Den første div blokken vil da ligne det som er vist nedenfor:

<Div class = "youtube">
<Iframe width = "420" height = "315" src = "http://www.youtube.com/embed/9AumAucSAZ8&quot; frameborder =" 0 "allowfullscreen> </ iframe>
</ Div>

7 Gå tilbake til YouTube, spille en annen video, og klikk deretter på "Stopp". Kopier HTML-koden og gå tilbake til HTML-dokumentet. Lim denne koden inn i andre div blokk under teksten som leser, "Lim koden for første videoen her." Slett teksten etter lime koden inn i div blokken. Hver iframe har verdier for bredde og høyde i piksler. Endre disse verdiene hvis du ønsker å endre dimensjonene på videospillere.

8 Lagre HTML-dokumentet og vise den i nettleseren din. YouTube-videoer du har lagt til websiden vises. Klikk på sine "Play" for å spille av videoer.

Hint

  • Legg til flere YouTube-videoer til din multi videoskjermen ved å legge til ekstra div blokker i HTML-koden. Legg til en tredje video, for eksempel ved å kopiere koden fra en tredje YouTube-video og lime den inn i en ny div blokk under de eksisterende div blokkene.
  • Legg merke til nettadressen som vises i hver div blokk. Lag en video begynner å spille automatisk ved å legge til "autoplay = 1?" - Uten anførselstegn - på slutten av hver nettadresse.
  • Tweak dimensjonene av videospillere for å oppnå multi skjermoppsettet du ønsker.