WEBデザインの勉強

WEB制作初心者が1から勉強するブログ。

YouTubeのチャンネル最新動画を埋め込む

YouTubeチャンネルFeedを取得する。

https://www.youtube.com/feeds/videos.xml?channel_id=【チャンネルID】

チャンネルIDを調べるには埋め込みたいYouYubeチャンネルのページへ行き、
URLを確認する。
channel/の後にある文字がチャンネルIDなので
上のURLの【チャンネルID】部分にコピー&ペーストする
URLに飛ぶとYouTubeチャンネルのFeedが表示される

HTML

<div class="movie"></div>

JS

$(function(){
  $.getJSON(
    'http://ajax.googleapis.com/ajax/services/feed/load?callback=?',
    {
      q: 'https://www.youtube.com/feeds/videos.xml?channel_id=【チャンネルID】',
      v: '1.0',
      num: 1
     },
    function (data) {
      $.each(data.responseData.feed.entries, function(i, item){
        var _url = item.mediaGroups[0].contents[0].url.split("version=3")[0].replace( "v" , "embed" );
        setTimeout( function(){
          $('.movie').append('<iframe width="640" height="360" src="'+
            _url +'rel=0" frameborder="0" allowfullscreen></iframe>');
        },1000);
      });
    }

  );
});
パラメータ 内容
q 読みこむフィードのURL
v ヴァージョン。現在は1.0
num 取得する最大数。最大100省略時4 -1で全件


取得したURLをそのまま埋めこんだら
一部スマートフォンYouTubeが表示されなかったので
iframeのURLを書き換えてみた。

・version=3を削除
・vをembedに変更