HTML eerste stappen – Les 7 – De <object>-tag. Video invoegen van YouTube.

Vaak is het nodig om een YouTube-video in je blog in te voegen. In deze les bekijken we welke tags en attributen daarvoor worden gebruikt. Laten we eerst naar YouTube gaan en de insluitcode van een video kopiëren.

We krijgen de volgende code:

<object style="height: 390px; width: 640px">
  <param name="movie" value="http://www.youtube.com/v/eyl6mLL6jXQ?version=3&feature=player_detailpage">
  <param name="allowFullScreen" value="true">
  <param name="allowScriptAccess" value="always">
  <embed src="http://www.youtube.com/v/eyl6mLL6jXQ?version=3&feature=player_detailpage" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="640" height="360">
</object>

Zoals je waarschijnlijk al hebt gemerkt, wordt voor het invoegen van een video de tag <object> gebruikt. Deze tag heeft ook het attribuut style. Het attribuut style is universeel en kan bij elke HTML-tag worden gebruikt om CSS-stijlen direct in te voegen. Wat CSS is, zullen we later uitgebreider bespreken, maar voorlopig is dit voldoende. CSS-stijlen binnen het attribuut worden gescheiden door puntkomma’s. In dit geval hebben we height en width (hoogte en breedte), die we kunnen aanpassen. Bijvoorbeeld, als we schrijven:

<object style="height: 195px; width: 320px">
  <param name="movie" value="http://www.youtube.com/v/eyl6mLL6jXQ?version=3&feature=player_detailpage">
  <param name="allowFullScreen" value="true">
  <param name="allowScriptAccess" value="always">
  <embed src="http://www.youtube.com/v/eyl6mLL6jXQ?version=3&feature=player_detailpage" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="640" height="360">
</object>

dan zal de YouTube-speler twee keer zo klein worden weergegeven. In dat geval moeten we ook de waarden width en height aanpassen binnen de <embed>-tag, die de afmetingen van de video bepaalt:

<object style="height: 195px; width: 320px">
  <param name="movie" value="http://www.youtube.com/v/eyl6mLL6jXQ?version=3&feature=player_detailpage">
  <param name="allowFullScreen" value="true">
  <param name="allowScriptAccess" value="always">
  <embed src="http://www.youtube.com/v/eyl6mLL6jXQ?version=3&feature=player_detailpage" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="320" height="180">
</object>

De <object>-tag bevat ook <param>-tags. Binnen deze tags worden eigenschappen van het ingesloten object gedefinieerd. Onder de parameters bevinden zich:

movie — geeft aan dat het een video is; in het attribuut value staat de URL van de video.

allowFullScreen — bepaalt of de video in volledig scherm mag worden afgespeeld. Als je value="false" zet, wordt de volledigschermmodus uitgeschakeld.

allowScriptAccess — is nodig om de speler via API’s te kunnen aansturen.