Youtube動画更新で、ホームページに自動連動させる

: らら

2022.01.06

はじめに

最近、Youtube DATA APIやったことある？とか、筆者は見る専門で、動画配信とかやったことないので、質問が多いので調べてみた。

Twitterから始まって、facebook,Google mapなどいろいろなAPIやったけど、数年すると使えなくなったり・・するのでほんとは嫌いです・・笑

まぁ。あらかじめ、クライアントさんには、そういう説明付きで、設置するかですね。

要件

Youtubeで更新したら、自社ホームページなどで、HTMLを修正しなくても連動してくれる。

方法として、Youtubeのfeed機能を使う方法、Youtube DATA APIを使用する方法かな、まぁ1つの方法だと数年すると使えなくなるといけないので代替えも準備する

必要があるのでとりあえず２つとも検証することにする。

方法

Youtubeのfeed機能を使う方法は、

Google Feed APIの下記が使用できなくなったので

http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&callback=?&q='

下記を採用する

https://api.rss2json.com/v1/api.json?rss_url="

さらに代替えでphp版も準備する。

これらは、javascript(jquery)から外部サイトを参照することがCORS policyに制約によってアクセスできないため、外部側が設定されていれば、参照できます。

youtube feedでは、XMLもあってjavascript(jquery)から外部にアクセスできません。

http://www.youtube.com/feeds/videos.xml?channel_id=

アクセスすると、下記のエラーになるはず。。

Access to XMLHttpRequest at 'https://remoteserver' from origin 'http://callserver' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

なので無料の外部サービス、Google Feed API、rss2jsonを利用するのだか、Google Feed APIはサービスが終了しているため、rss2jsonを使うものと

自サーバーにphpを置いて、そちら経由でアクセスする方法を試します。phpなどのプログラムからはCORS policy関係なのでアクセスできます。

方法１

rss2jsonサービスを使う方法。こちらのサービスが終了してしまうと使えません。

また、Youtube Feed APIも同様です。

YoutubeのチャンネルIDを閲覧したい、チャンネルのものをセットすればOK

チャンネルIDは閲覧中のURLにあるのでわかるかと・・

https://www.youtube.com/watch?v=ここの部分です。

iframeの引数はお好みで・・


<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>rss2json</title>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
	<meta name="format-detection" content="telephone=no">
	<meta name="keywords" content=",,,,">
	<meta name="description" content="">
	<meta name="author" content="">
	<meta name="google-site-verification" content="">
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(function() {
	id = 'YoutubeのチャンネルID';
	url = 'http://www.youtube.com/feeds/videos.xml?channel_id='+id;
	$.ajax({
		url: 'https://api.rss2json.com/v1/api.json?rss_url=' + encodeURIComponent(url),
		dataType: 'json',
		success: function(data) {
			if(data.status == 'ok') {
				$.each(data.items, function(i, item){
					var id = item.guid;
					id = id.replace("yt:video:","");
					$('#youtubelist ul').append('<li><iframe width="560" height="315" src="https://youtube.com/embed/'+id + '?controls=0&showinfo=0&rel=0" frameborder="0" allowfullscreen></iframe>'+item.title+'</li>');
				});
			}
		}
	});
});
</script>
</head>
<body id="pagetop">
<div id="youtubelist"><ul></ul></div>
</body>
</html>

方法２

PHP介して、Youtube Feed APIを使う方法

iframeの引数はお好みで・・


<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>php </title>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
	<meta name="format-detection" content="telephone=no">
	<meta name="keywords" content=",,,,">
	<meta name="description" content="">
	<meta name="author" content="">
	<meta name="google-site-verification" content="">
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(function() {
	id = 'YoutubeのチャンネルID';
	url = 'http://www.youtube.com/feeds/videos.xml?channel_id='+id;
	$.ajax({
		url: 'あなたのサイトURL/ajax.php?url=' + encodeURIComponent(url),
		dataType: 'json',
		success: function(data) {
			$.each(data.entry, function(i, item){
				var id = item.id;
				id = id.replace("yt:video:","");
				$('#youtubelist ul').append('<li><iframe width="560" height="315" src="https://youtube.com/embed/'+id + '?controls=0&showinfo=0&rel=0" frameborder="0" allowfullscreen></iframe>'+item.title+'</li>');
			});
		}
	});
});
</script>
</head>
<body id="pagetop">
<div id="youtubelist"><ul></ul></div>
</body>
</html>

ajax.phpの中身

サンプルです。実際はエラーチェックその他処理してあげましょう。


<?php
if(isset($_GET["url"]) && preg_match("/^https?:/",$_GET["url"])){
	$xml = file_get_contents($_GET["url"]); 
	$xml = str_replace(array("\n", "\r", "\t"), '', $xml);
	$xml = trim(str_replace('"', "'", $xml));
	$simpleXml = simplexml_load_string($xml,'SimpleXMLElement',LIBXML_NOWARNING | LIBXML_NOERROR | LIBXML_NOCDATA);
	header('Content-Type: application/json; charset=UTF-8');
	header('X-Content-Type-Options: nosniff');
	echo json_encode($simpleXml);
} else {
	echo "error";
}

方法３

Youtube DATA API v3を使う方法

iframeの引数はお好みで・・

Youtube DATA API v3を使用しても、今までの経験上、使えなくなる場合があります。


<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>Youtube DATA API v3</title>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
	<meta name="format-detection" content="telephone=no">
	<meta name="keywords" content=",,,,">
	<meta name="description" content="">
	<meta name="author" content="">
	<meta name="google-site-verification" content="">
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(function() {
	var api_key		= 'Youtube DATA API v3API KEY';
	var channelid	= 'YoutubeのチャンネルID'
	$.ajax({
		type: 'GET',
		url: 'https://www.googleapis.com/youtube/v3/search?part=snippet&channelId='+channelid+'&maxResults=5&order=date&type=video&key='+api_key,
		datatype: 'json',
		success: function(json){
			$.each(json.items, function(i, item){
				var id = item.id.videoId;
				$("#youtubelist").append('<li><iframe width="560" height="315" src="https://www.youtube.com/embed/' + id + '" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></li>');
			});
		},
		error: function(){
			alert('error');
		}
	});
});
</script>
</head>
<body id="pagetop">
<div id="youtubelist"><ul></ul></div>
</body>
</html>