56 行
2.2 KiB
HTML
56 行
2.2 KiB
HTML
<!--version : 1.1.１-->
|
||
<!DOCTYPE html>
|
||
<html lang="ja">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title id="mytitle">YouTubeの埋め込み</title>
|
||
</head>
|
||
<body>
|
||
<iframe id="myframe"frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
||
<script>
|
||
var link = prompt("YouTubeのリンクを入力してください。\n ちなみに、著作権で保護された動画は再生できないっぽいです。");
|
||
var frame = document.getElementById("myframe");
|
||
var title = document.getElementById("mytitle");
|
||
// youtube.com/shorts/**のURLにも対応するように、正規表現のパターンを変更
|
||
var youtubePattern = /^(https:\/\/youtu\.be\/|https:\/\/(www\.)?youtube\.com\/(watch\?v=|shorts\/))([\wA-Z-]+)$/;
|
||
// link変数に対してmatchメソッドを使って、正規表現とマッチした結果を取得
|
||
var match = link.match(youtubePattern);
|
||
if (match) {
|
||
// 入力がYouTubeのリンクの形式に合っている場合
|
||
// 埋め込み用のURLに変換
|
||
// match[4]は、動画IDとなる文字列
|
||
var embed = "https://www.youtube.com/embed/" + match[4] + "?rel=1&autoplay=1";
|
||
// フレームのsrc属性に設定
|
||
frame.src = embed;
|
||
// 動画のタイトルを取得するために、Web検索を行う
|
||
var query = "YouTube " + match[4];
|
||
var results = search_web(query);
|
||
// Web検索の結果から、最初に見つかった動画のタイトルを取得
|
||
var videoTitle = results.web_search_results[0].title;
|
||
// <title>タグの中に動画のタイトルを入れる
|
||
title.textContent = videoTitle;
|
||
} else {
|
||
// 入力がYouTubeのリンクの形式に合っていない場合
|
||
// confirm関数で、はいといいえのダイアログを表示する
|
||
var result = confirm("不正なURLです。\n OKを押すとabout:blankへ遷移されます。\n キャンセルを押すと再度入力可能になります。");
|
||
if (result) {
|
||
// OKを押した場合
|
||
window.location = "about:blank";
|
||
} else {
|
||
// キャンセルを押した場合
|
||
// ページをリロードして最初に戻る
|
||
window.location.reload();
|
||
}
|
||
}
|
||
</script>
|
||
<style>
|
||
iframe {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
</style>
|
||
</body>
|
||
</html> |