YouTube embed: Den ultimative guide

Photo by ivke32@pixabay.com

YouTubes indlejringsfunktion er guld værd – du kan få videoerne ind på din hjemmeside og ikke mindst få dem til at se ud som om, at de hører til. YouTubes indlejringsfunktion er også noget af det, jeg bliver spurgt allermest om.

Så her er en gennemgang. Første udgave er skrevet i januar 2017, og jeg vil forsøge at opdatere løbende. Hvis du finder unøjagtigheder, så sig til på @mocdotcom.

Hvor finder jeg embed-koden?

  1. Besøg videoen på YouTube, fx https://www.youtube.com/watch?v=Ok5YGQQ8R8U
  2. Tryk ‘Del’ og vælg derefter ‘Indlejring’.
  3. Kopier koden, der er markeret.

Hvordan ændrer jeg størrelsen på YouTube-indlejringen?

Hvis du skal bruge en video til en hjemmeside, ser det meget bedre ud, at videoen fylder hele bredden i tekstfeltet i stedet for at mangle 20 pixels i den ene side. Det kan også være, at du har brug for en video, der fylder meget lidt.

Uanset hvad, er det en efterspurgt feature at kunne tilpasse størrelsen, og den finesse, der kan løfte oplevelsen af en hjemmeside

  1. Besøg videoen på YouTube
  2. Tryk ‘Del’ og vælg derefter ‘Indlejring’.
  3. Vælg ‘Vis mere’ under koden.
  4. Find linjen ‘Videostørrelse’. Her har du mulighed for at vælge nogle størrelser på forhånd eller at indtaste en nøjagtig bredde ved at vælge ‘Tilpasset størrelse’. Du behøver kun at udfylde højden eller bredden. YouTube udfylder selv det andet felt med den passende størrelse.
  5. Kopier koden, når du har valgt ny størrelse. Du bør kunne se, at din valgte størrelse går igen i iframens ‘height’- og ‘width’-attribut.

Hvordan undgår jeg, at der bliver vist foreslåede videoer, når videoen er færdig?

Det er fedt at lave en video til sin hjemmeside og få den integreret blandt det andet indhold. Det virker professionelt og lækkert, hvis det er gjort godt. Derfor er det også ekstra ærgerligt, hvis brugeren eksponeres for andre foreslåede videoer, når din har kørt færdig.

Det kan nemt ødelægge det professionelle udtryk, at der på din hjemmeside dukker useriøse videoer op – eller måske videoer af konkurrentens produkter. Det er der heldigvis råd for.

  1. Besøg videoen på YouTube.
  2. Tryk ‘Del’ og vælg derefter ‘Indlejring’.
  3. Vælg ‘Vis mere’ under koden.
  4. Fjern krydset i ‘Vis foreslåede videoer, når videoen er færdig’.
  5. Kopier koden. Bemærk, at du i kodens src-attribut nu kan se stykket ‘rel=0’ som et url-parameter.

Hvordan indlejrer jeg en hel playliste?

Det kan give god mening at indlejre en playliste i stedet for særskilte videoer. Playlister giver dig mulighed for selv at kuratere indhold, og så kan du med ét enkelt videofelt få en bredere palette af indhold ind på din hjemmeside.

Indlejring af playlister foregår næsten ligesom med enkelte videoer.

  1. Besøg playlisten på YouTube.
  2. Tryk ‘Del’ og vælg derefter ‘Indlejring’.
  3. Vælg eventuelt ‘Vis mere’ under koden og juster størrelse m.v.
  4. Kopier koden.

Hvordan undgår jeg at indlejre en hel playliste?

Det er en typisk fejl, jeg ser. Man tror, at man deler eller indlejrer én video, men i virkeligheden er det hele playlisten, videoen tilhører, man får med.

Det er selvfølgelig nemt at sikre sig mod, hvis blot du er opmærksom på tredje punkt herunder.

  1. Besøg videoen på YouTube.
  2. Tryk ‘Del’ og vælg derefter ‘Indlejring’.
  3. Fjern fluebenet i ‘Del med playliste med start fra [aktuel video | starten af playlisten]’
  4. Vælg eventuelt ‘Vis mere’ under koden og juster størrelse m.v.
  5. Kopier koden.

Værktøjer til HTML

Lad være med at bruge lang tid på at overveje, hvilke værktøjer du skal bruge. Det er vigtigere at komme i gang!

Hvilken editor skal jeg bruge? Hvad skal jeg downloade? Hvad er det bedste program til at redigere HTML? Det er typiske spørgsmål, der dukker op, når interessen falder på HTML.

Interessen for værktøjer er naturlig, men risikerer at fylde alt for meget og stå i vejen for at komme i gang. Der er ingen grund til at vægte funktionerne mellem Netbeans og Sublime mod hinanden, hvis du endnu ikke har skrevet dit første HTML-dokument.

De HTML-værktøjer skal du bruge

Du skal bruge to ting, for at arbejde med HTML:

  • En webbrowser til at se resultatet. Fx. Internet Explorer, Safari, Firefox eller Chrome.
  • En editor. Et simpelt redigeringsværktøj som fx Notepad, TextEdit, Brackets eller Notepad++.

Den allerbedste nyhed er, at du allerede har, hvad du skal bruge!

Webbrowser

Webbrowseren kan sagtens være den, du bruger til at læse denne tekst. Webbrowseren læser HTML-koden, fortolker den og viser til brugeren(eller dig som udvikler).

Når du arbejder med HTML-koden, så bruger du webbrowseren til at se resultatet af dit arbejde.

Foruden de medfølgende webbrowsere til Windows og Mac, er almindelige webbrowsere:

HTML-editor

Regel nummer ét er: Hold det simpelt!

De simpleste

Til Windows:
Navn: Notepad (på dansk ‘Notesblok’).
Anskaffelse: Er allerede installeret.
Beskrivelse: Ekstrem simpel editor, der allerede er installeret på alle Windows-computere, så du skal ikke hente den noget sted fra.
Fordele: Simpel, gratis og pre-installeret.
Ulemper: Har ingen farvekodning eller autocompletion.

Til Mac:
Navn: TextEdit
Anskaffelse: Er allerede installeret.
Beskrivelse: TextEdit er et simpelt tekstredigeringsprogram, der virker fint som HTML-editor.
Fordele: Simpel, gratis og pre-installeret.
Ulemper: Giver mulighed for at gemme tekst med formatering. Husk at vælge ‘Plain text’.

Dem, der kan mere

Til Windows:
Navn: Notepad++
Anskaffelse: notepad-plus-plus.org
Beskrivelse: Notepad++ er et open source-program, der både kan fungere som helt simpel editor og udvides med mange plugins.
Fordele: Notepad++ er simpelt, men stadig kraftfuldt. Som standard er farvekodning aktiveret, og det letter overblikket. Muligheden for at udvide med plugins gør, at du kan komme langt uden at behøve andre værktøjer.
Ulemper: Jeg har ikke fundet et ordentligt plugin til autocompletion.

Til Windows, Mac og Linux:
Navn: Brackets
Anskaffelse: brackets.io
Beskrivelse: Brackets er et open source-program, der er lækkert at arbejde med og kan udvides med plugins.
Fordele: Mange plugins og et generelt lækkert interface.
Ulemper: Kan virke forvirrende. Værktøjet begynder let at fylde i bevidstheden, hvis du er nybegynder.

Kom i gang med HTML

Næste skridt er at komme i gang med HTML. Det er heldigvis hurtigt og nemt, og du finder guiden lige her: Hvad er HTML?

HTML-links binder internettet sammen.

Sådan laver du links i HTML

Links er hele grundstammen i internettet. Det er links, der gør, at alt bindes sammen, og her lærer du at lave links så nemt som ingenting.

Et link i HTML ser sådan ud:

<a href=”http://eksempel.dk”>eksempel.dk</a>

De enkelte elementer er:

  1. <a er begyndelsen af åbnings-tagget
  2. href=”http://eksempel.dk” afgør, hvor linket fører hen
  3. > er enden af åbnings-tagget
  4. eksempel.dk er den link-tekst, brugeren ser
  5. </a> er luknings-tagget

Linket er altså et ganske normalt HTML-element, men adskiller sig ved at have den nødvendige ekstra egenskab, der fortæller, hvor linket skal pege hen.

Den ekstra egenskab kalder man en attribut.

Sammenhæng mellem tekst og link

Læg mærke til, at der ikke er nogen sammenhæng mellem den tekst brugeren ser og det sted, linket fører hen!

Dette link fører til DR, men brugeren vil se teksten “TV 2”:

<a href=”http://dr.dk”>TV 2</a>

Dette link fører til TV 2, men brugeren vil se teksten “DR”:

<a href=”http://tv2.dk”>DR</a>
Tip: Du kan se, hvor et link fører hen ved at holde musen over linket og se i bunden af browseren.

Typisk fejl: Sådan sikrer du, at dine links fører det rigtige sted hen.

Åbn i nyt vindue

Du kan styre om linkets destination skal åbne i en ny fane eller i den eksisterende fane ved at indsætte en ekstra attribut.

Hvorfor er det en god idé? Oftest fordi du gerne vil have at brugeren ikke forlader din side, hvis du linker til andre sider.

Hvis jeg linker til w3schools.com, vil jeg gerne have, at du ikke forlader min hjemmeside, men at w3schools.com åbner i en ny fane hos dig.

Attributen hedder target og er fremhævet her:
<a target=”_blank” href=”http://eksempel.dk”>eksempel.dk</a>

Her har jeg indsat værdien _blank mellem citationstegnene. Det gør, at linket åbner i ny fane.

At få linket til at åbne i en ny fane er det eneste, jeg bruger target-attributten til. Der er andre muligheder, som du kan læse om her: http://www.w3schools.com/tags/att_a_target.asp

Linket åbner selvfølgelig i nyt vindue!

Hvad er HTML?

Hvad er HTML?

HTML er det sprog, hjemmesider er skrevet i. Det er internettets mursten.

Enhver hjemmeside, du ser, er bygget op af HTML-kode. Derfor er det også ekstremt nyttigt at kunne læse og skrive HTML.

HTML-kode er det, der gør forskellen på typer af overskrifter, om teksten er rød, sort eller i fed og meget andet.

Sådan virker HTML

Når du besøger hjemmesider, sker det i en web browser. Det kan være Chrome, Safari, Internet Explorer, Firefox eller andre.

Din web browser læser HTML-koden fra en hjemmeside og bruger koden som instruktion til, hvordan den skal vise hjemmesiden.

Her er HTML-koden for at skrive “eksempel” med fed skrift:

<strong>eksempel</strong>

Resultatet bliver:

eksempel

Her er HTML-koden for at skrive “eksempel” med kursiv:

<em>eksempel</em>

Resultatet bliver:
eksempel

Der er med andre ord en skjult kode, HTML-koden, som afgør, hvordan resultatet fremstår for dig som bruger. HTML-koden er en instruktion til din webbrowser, som fortæller den, hvad den skal gøre.

Læs også: Hvilke værktøjer skal du bruge(og hvilke behøver du ikke!)

Sådan ser HTML ud

En hjemmeside består af mange små dele. Man kalder dem HTML-elementer.

Et HTML-element kan fx være:

Et afsnit:

<p>Eksempel</p>

En overskrift:

<h1>Overskrift</h1>

Fed tekst:

<strong>Skrevet med fed</strong>

Kan du se, hvad alle HTML-elementerne har til fælles?

De består af tre dele:

  • Begyndelsen kalder man åbnings-tagget.
    Det består af et <, typen af tagget og til slut >.
    Fx. <p>.
  • Indholdet. Det, der står efter åbnings-tagget men før luknings-tagget.
  • Slutningen kalder man luknings-tagget.
    Det består af et <, /, typen af tagget og til slut >.
    Fx. </p>. Luknings-tagget er altså det samme som åbnings-tagget, bare med en / i.

Der findes også en anden type tags, nemlig selvlukkende tags. Det er fx:

Linjeskift:

<br />

Billede:

<img />

Vandret streg:

<hr />

De selvlukkende tags bliver brugt, hvor det ikke giver mening, at der skal stå noget mellem et åbnings- og et luknings-tag.

Et selvlukkende tag består af et <, typen af tagget, mellemrum, / og til slut >.

Fx. <br />

Øvelse: Dit første HTML-dokument

Lav dit første HTML-dokument på fem minutter! Du skal kun bruge et simpelt tekstværktøj og en browser.

  1. Åbn Notesblok
  2. Skriv eller indsæt følgende HTML-kode:
    <html>
      <head>
        <title>Mit HTML-dokument</title>
      </head>
      <body>
        <h1>Min overskrift</h1>
        <p>Mit første afsnit tekst.</p>
      </body>
    </html>
  3. Vælg “Gem som” og vælg “Alle filer” i boksen nederst.
  4. Gem dokumentet på skrivebordet som “hjemmeside.html”.
    Vær opmærksom på, at den sidste del af filnavnet skal være “.html”, ikke “.txt”.
  5. Dobbeltklik på dokumentet, og se det åbne i din webbrowser.

Tillykke, du har lavet dit første HTML-dokument!

Tag testen!