Satt igår med ett projekt där kunden hade följande önskemål:

• HD-upplösning skall vara förvalt
• Dölja related videos i slutet av klippet
• Ha möjlighet att spela upp Youtube playlists

Vi använder Youtubes IFrameAPI i vårat projekt.

MovieBlock.cs

public class MovieBlock : BaseBlockData
{
[CultureSpecific]
[Required]
[Display(
    Name = "YouTube ID",
Order = 10
  )]
public virtual string YoutubeId { get; set; }

[CultureSpecific]
[Display(
    Name = "Youtube Playlist Id",
    Description = "Insert an link to a Youtube-playlist",
    Order = 20
  )]
public virtual string YoutubePlaylistId { get; set; }

[CultureSpecific]
[Display(
Name = "Slate Image",
Description = "Insert an optional slate image to appear over video (W: 940px / H: 557px)",
    Order = 30
  )]
public virtual MediaReference SlateImage { get; set; }
}

Kod i Youtubes exempel.

var player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
      height: '390',
      width: '640',
      videoId: 'M7lc1UVf-VE',
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });

Ta bort related videos
För att sätta olika flaggor använder Youtube en egenskap vid namn playerVars. För att se de olika alternativen se här.

Disable related videos = rel : 0

var player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
      height: '390',
      width: '640',
      videoId: 'M7lc1UVf-VE',
      playerVars: 'rel' : '0'
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });

HD-upplösning som standard
vq : highres

var player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
      height: '390',
      width: '640',
      videoId: 'M7lc1UVf-VE',
      playerVars: 'rel' : '0', 'vq' : 'highres'
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });

Möjlighet att spela playlists
list : Youtubelistans ID

var player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
      height: '390',
      width: '640',
      videoId: 'M7lc1UVf-VE',
      playerVars: 'rel' : '0', 'vq' : 'highres', 'list' : 'ajkfsnsakjfnajskf14124'
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });

Slutgiltlig kod
Kollar om publiceraren har valt att använda sig utav en playlist eller inte.

var player;
function onYouTubeIframeAPIReady() {
   var playerVars;
   if ($(this).attr('data-playlist')) {
        playerVars = {
          'rel': '0',
          'vq': 'highres',
          'list': $(this).attr('data-playlist')
        }
   } else {
      playerVars = {
            'rel': '0',
                'vq': 'highres'
            }
    }

     player = new YT.Player('player', {
      height: '390',
      width: '640',
      videoId: 'M7lc1UVf-VE',
      playerVars: playerVars
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });