WordPress・YouTube動画の埋め込み方法【テレビのような枠線付き】

当サイトはアフィリエイト広告を利用しています。

→ サイトを見てみる

WordPressで「YouTube動画」をそのまま埋め込むと読み込みやプレビューも重くなり、良い状態とは言えません。

1つや2つの動画であれば気にしなくて良いのですが、映画や音楽のまとめ記事などで大量に貼る場合、読み込み速度が遅いと「読者」「筆者」共にストレスですよね。

それに普通に埋め込むとデザインがイケてないのです。そこで、動画を読み込む前にデザインしたダミー画像を読み込ませて、画像をクリックした場合のみ動画の読み込みが開始されるようにしました。

こうすることで、読者は見たい動画だけを選択でき、筆者の確認も楽になり、デザイン的にもGoodです。

画像をクリックすると動画が開始されます。(スマホの場合は2回タップ)

YouTubeを20個埋め込んだ記事はこちら

2018.10.4-追記-

今回のカスタマイズは、当サイトで使用しているプラグイン「BJ Lazy Load(画像遅延)」と相性が悪いことがわかりました。(画像をクリックすると404ページになっちゃう)

BJ Lazy Loadの使い方と設定【画像遅延プラグイン】

もし使用している方は、投稿画面のサイドバーからその投稿だけ無効にできる項目があるので、チェックしてください。

BJ Lazy Load無効設定

なお、他のLazy Load系プラグインやプラグインなしで実装するパターンは検証していないので悪しからず。

YouTubeを埋め込む方法1【投稿画面にカスタムCSSを追加】

冒頭で述べたように「YouTube動画」はたまにしか埋め込まないので、CSSも使う記事だけ入力できるようにします。

以下のコードを子テーマの「functions.php」にコピペしてください。

子テーマの使い方はこちら

Cyberduckの使い方WordPressの子テーマを分かりやすく解説

functions.php
//投稿・固定ページにCSS入力欄追加
add_action('admin_menu', 'custom_css_hooks');
add_action('save_post', 'save_custom_css');
add_action('wp_head','insert_custom_css');
function custom_css_hooks() {
add_meta_box('custom_css', 'Custom CSS', 'custom_css_input', 'post', 'normal', 'high');
add_meta_box('custom_css', 'Custom CSS', 'custom_css_input', 'page', 'normal', 'high');
}
function custom_css_input() {
global $post;
echo '<input type="hidden" name="custom_css_noncename" id="custom_css_noncename" value="'.wp_create_nonce('custom-css').'" />';
echo '<textarea name="custom_css" id="custom_css" rows="5" cols="30" style="width:100%;">'.get_post_meta($post->ID,'_custom_css',true).'</textarea>';
}
function save_custom_css($post_id) {
if (!wp_verify_nonce($_POST['custom_css_noncename'], 'custom-css')) return $post_id;
if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return $post_id;
$custom_css = $_POST['custom_css'];
update_post_meta($post_id, '_custom_css', $custom_css);
}
function insert_custom_css() {
if (is_page() || is_single()) {
if (have_posts()) : while (have_posts()) : the_post();
echo '<style type="text/css">'.get_post_meta(get_the_ID(), '_custom_css', true).'</style>';
endwhile; endif;
rewind_posts();
}}

これで投稿・固定の編集ページ下に、ボックスが追加されるので、今回紹介する「CSS」はここにコピペします。

表示されない場合は「投稿の編集」画面で以下の箇所にチェックが入っているか確認してください。

YouTubeを埋め込む方法2【動画IDを確認】

以下のv=より後に続くものが動画IDです。

YouTubeを埋め込む方法3【HTMLコード】

「ビジュアルエディタ」ではなく「テキストエディタ」に貼り付けます。

<div class="you-video" video="https://www.youtube.com/embed/動画ID?rel=0&showinfo=0&autoplay=1&start=11"><img src="https://img.youtube.com/vi/動画ID/mqdefault.jpg" alt="動画タイトル" width="100%" height="auto" /></div>

動画ID2箇所に埋め込みたい「動画ID」をコピペしてください。

rel=0〜start=11までは動画再生時に指定できるパラメータです。

不要なものは各自削除してください。

パラメータを複数指定する場合は間に「&」を挟むのを忘れずに。

他のパラメータを確認したい方はこちらの記事が参考になります。

「YouTube埋め込みコードカスタマイズ！自動再生やタイトル非表示」

動画タイトルは、今回のサンプルで言えば「マトリックスリローデッド」と入力すればOKです。

width:100%とheight:auto部分はダミー画像のサイズです。

表示する画面幅(PC・タブレット・スマホ)に合わせる指定にしていますが、小さくしたい場合は各自「値」を指定してください。(500pxなど)

YouTubeを埋め込む方法4【CSSコード】

style.css
/* 画像周りの枠線と相対位置 */
.you-video {
position: relative;
border:solid 30px #000;/* ダミー画像周りの黒い枠線 */
margin:20px 0;/* ダミー画像周りの余白 */
}
/* YouTubeアイコン */
.you-video::before {
position: absolute;
font-family: "Font Awesome 5 Brands";
content: "\f167";
font-weight:400;
color: #fc0d1c;/* アイコンカラー */
font-size: 70px;/* アイコンサイズ */
top: 50%;
left: 50%;
transform : translate(-50%,-50%);
opacity: .90;/* アイコンを少し透明に */
}
/* 三角アイコン */
.you-video::after{
position: absolute;
font-family: "Font Awesome 5 Free";
content: "\f04b";/* 三角アイコン指定 */
font-weight:900;
color: #fff;/* アイコンカラー */
font-size: 27px;/* アイコンサイズ */
top: 50%;
left: 50.2%;/* 真ん中より少し右にずらす */
transform : translate(-50%,-50%);
}
/* 画像マウスホバー時 */
.you-video img:hover{
cursor: pointer;/* リンクカーソル指定 */
width:100%;
height:100%;
}
/* YouTubeアイコンマウスホバー時 */
.you-video:hover::before {
color:#777;/* アイコンカラー */
transition:.5s;/* ゆっくり変化 */
}
/* スマホ用の指定 */
@media screen and (max-width: 500px) {
.you-video {
border:solid 15px #000;/* 画像周りの枠線を細く */
}
.you-video::after{
position: absolute;
left: 50.4%;/* 三角アイコンを少し右側へ */
}}

「YouTubeアイコン」と「三角アイコン」をダミー画像の上に重ねて、YouTubeっぽく見えるようにしました。

両方とも「Font Awesome 5用のコード」を使用しています。

導入方法はこちら

YouTubeを埋め込む方法5【記事の一番下に貼り付けるJSコード】

テキストエディタに貼り付けてください。

Javascript
<script>// <![CDATA[
$('.you-video').click(function(){
video = '<iframe src="'+ $(this).attr('youtube') +'" frameborder="0" width="100%" height="300"></iframe>';
$(this).replaceWith(video);
});
// ]]></script>

上記の.you-videoとyoutube部分が「埋め込み用HTMLコード」の赤字部分なので変更する場合は両方とも変えてください。

HTML
<div class="you-video" youtube="https://www.youtube.com/embed/動画ID?rel=0&showinfo=0&autoplay=1&start=11"><img src="https://img.youtube.com/vi/動画ID/mqdefault.jpg" alt="動画タイトル" width="100%" height="auto" /></div>

width:100%とheight:300は動画のサイズです。

縦幅300くらいにしておくと、どのデバイスで見ても見栄えは良いと思いますが、この辺はお好みで。

YouTubeを埋め込む方法【まとめ】

そのうち「映画」や「音楽」のまとめ記事を作ろうかなぁと思い、その時に使えそうなコードを書いてみました。

やや中級者向けですが、記事に一味出したい方の参考まで〜。

追記

音楽紹介の記事完成。動画のまとめ記事をオシャレに作りたい人は参考になるかも。YouTubeを20個埋め込んでも快速です。

→ サイトを見てみる