こんにちは。
リーデックス小川です。
先日、7月15日に実家へお坊さんが来ました。旧暦で盂蘭盆だったためなのですが、なぜか実家は旧暦の盆のようです。地域性なんですかね？今年からは代替わりして、女性の坊さんが担当になったようです。いろいろとお話を聞いて、とてもためになりました。また来年、お会いすることがとても楽しみです。
さて、今日はYoutubeの動画をプリザンターに貼り付ける方法について書いてみたいと思います。公式FAQに上がっていたもので、少し見た目が派手（笑）のため、試してみようと思いました。
Youtubeの動画をiframeで埋め込んで表示したい（ID：509630）
それでは始めていきましょう。公式FAQは下記URLとなります。
https://pleasanter.net/fs/publishes/509630/edit
まずは、下準備です。適当なフォルダでテーブルを作成しましょう。テーブルは記録テーブルでも期限付きテーブルでもどちらでもOKです。
テーブル作成後に、分類Aを「エディタ」タブでついかし、分類Aを「埋め込みタグ」と名前を変更してください。
エディタの操作方法の詳細は割愛しますので、追加の方法がわからない方は、下記を参考にしてみてください。
続いて、タブ「スクリプト」に下記スクリプトを追加します。タイトルは「動画セット」として、出力先を「編集」のみに設定してください。
// 動画のiframeをセット
showMovie = function () {
// 分類Aに入力された埋め込みタグを取得
var html = $p.getControl('ClassA').val();
// 埋め込みタグを内容欄にセット
$p.getControl('Body').parent().html(html);
}
// 分類Aが変更されたら動画を変更
$p.on('change', 'ClassA', function () {
showMovie();
});
// ページを開いた際にセット
showMovie();
設定の方法は下記に詳しく記載されています。
なお、
// 分類Aに入力された埋め込みタグを取得
var html = $p.getControl('ClassA').val();
// 埋め込みタグを内容欄にセット
$p.getControl('Body').parent().html(html);
の書き方については、最近のバージョンで実装されたものですので、古いバージョンの場合は動かないことがあります。もし、動かない場合で要望が多い場合は、修正版をブログで公開しようと思いますので、ぜひコメントを頂ければと思います。
さて、上記まで記載したら、変更ボタン、更新ボタンで反映させてください。これでプリザンター側の準備は完了です。
Youtubeの埋め込みタグを確認する
次に、実際に埋め込む動画の埋め込みタグを取得します。先ほど設定した分類A「埋め込みタグ」に、ここで取得したタグを張り付けます。
埋め込みたい動画に移動します。今回はこちらの動画を例に出させていただきました。動画の下にある「共有」をクリックします。
ポップアップで画面が表示されるので、「埋め込む」をクリックします。
表示された画面のソースを全選択してコピー、もしくは、画面下にあるコピーをクリックしてください。
これを先ほどのプリザンターのテーブルの分類A「埋め込みタグ」に追加します。そして画面をリロードすると・・・
できました！動画も無事に再生されていますね。
これを応用すれば、プリザンターでE-learningシステムを開発できそうですね。
ただし、注意してください！
E-learningはできそうですが、Youtubeを会員制サイトで利用したり、商業目的で利用する場合は、注意が必要です。必ず、利用規約に目を通して、利用方法が違反していないかを確認してください。
https://www.youtube.com/static?template=terms&hl=ja&gl=JP
※自己責任でお願いします。
まとめ
今日は、Youtubeの動画の埋め込みを行いました。ほかの動画サービスでも同じようなことはできそうですので、チャレンジしてみてください。
それでは今日はこの辺で。
最後までご覧いただきありがとうございました。
