【Magnific Popup】youtubeをポップアップ表示する
【悲報|タイトル表示されるようになりました】
2018年10月頃からyoutube側に仕様が変わり、タイトルを消したりする「showinfo」のパラメーターがなくなったようです。
youtubeは手軽だったのでこれは悲しいですね。
どうしてもタイトルが消したいというワガママを通すには他の方法を探さなきゃいけないみたいです。
(追記:2018年11月1日)
※背景にyoutubeの記事にも関連するので貼っておきます!
・・・
前回はyoutubeを埋め込む「tubular」のメモでしたが、今回はポップアップ。
youtubeの各動画のタイトル消しなども自分が検索した時なかったので、メモしておきます。
「Magnific Popup」をダウンロード
まずは以下からダウンロードします。
https://github.com/dimsemenov/Magnific-Popup
「Clone or download」から保存します。
「magnific-popup.css」
「jquery.magnific-popup.min.js」この二つを任意のところに入れます。
head部分
<link rel="stylesheet" href="common/css/magnific-popup.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="common/js/jquery.magnific-popup.min.js"></script>
上記のようにcssとjsを記載します。
body部分
<script>
$(function (){
$('.popup-youtube').magnificPopup({
type: 'iframe',//ここの指定で画像のポップアップなども可能!
mainClass: 'mfp-fade',//埋め込みたいclass名
removalDelay: 150,
preloader: false
});
});
</script>
何となくbody終わり前に記述しました。
<a href="//www.youtube.com/watch?v=動画のID" class="popup-youtube">
そしてaタグです。
ここまでは検索すれば結構丁寧に解説されています。
タイトル隠したい&最後の関連動画消したい
すっきりさせたかったので動画のタイトルとか消す設定です。
特に再生終了後の関連動画がかっこ悪いので消しました。
普通のiframeならリンクに直接書けば解決なのですが、そうするとエラーが出て砂嵐でした。
jQuery(window).load(function(){
jQuery('a[href*="youtube.com/watch"]').magnificPopup({
type: 'iframe',
iframe: {
patterns: {
youtube: {
index: 'youtube.com',
id: 'v=',
src: '//www.youtube.com/embed/%id%?rel=0&autoplay=1&showinfo=0'
}
}
}
});
});
実際記述したのは上の通りです。
「showinfo=0」タイトルをこれで消しています。
「autoplay=1」が関連動画を消し、再び再生の準備に。
別のjsに書いて、適応したページのyoutubeのポップアップを一括で設定可能です。
数十種類URLがあったので助かりました。
自分みたいに困ってる人いたら試してみてください。