WordPressカスタマイズまとめ←クリック

WordPressでYoutubeをオシャレに埋め込む方法【高速化】

YouTube埋め込み高速化

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

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

そこで、動画を読み込む前にダミー画像を読み込ませて、画像をクリックした場合のみ動画の読み込みが開始されるようにしたいと思います。

こうすることで、読者は見たい動画だけを選択でき、筆者の確認も楽になり、ダミー画像をCSSデザインすることでオシャレに見せることもできます。

補足

ダミー画像に「alt属性」を指定できるので、普通に動画を貼るより少ーしだけSEO的に良いですよ。

完成後は以下のようになります。画像をクリックしてみてください。(スマホの方は2回タップ

マトリックスリローデッドの動画

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

ダンスミュージック洋楽おすすめ 【思わず踊りたくなる】ノリノリ洋楽おすすめ20曲

ダミー画像だけであればプラグインでやる方法もありますが、デザインがイマイチなのと動画をしょっちゅう貼るわけではないので今回の方法で良いかと。

2018.10.4-追記-

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

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

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

BJ Lazy Load無効設定

BJ Lazy Load無効設定

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

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

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

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

functions.php編集

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

WordPress子テーマ 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」はここにコピペします。

ワードプレスカスタムCSS

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

WordPress表示オプションカスタムCSS

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

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

YouTube動画の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までは動画再生時に指定できるパラメータです。

上記で指定したパラメータ
  • 関連動画非表示rel=0
  • タイトル・ユーザー情報非表示showinfo=0
  • 自動再生autoplay=1
  • 動画の再生開始位置(秒指定)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: "FontAwesome";
content: "\f16a";/* アイコン指定 */
color: #fc0d1c;/* アイコンカラー */
font-size: 70px;/* アイコンサイズ */
top: 50%;
left: 50%;
transform : translate(-50%,-50%);
opacity: .90;/* アイコンを少し透明に */
}
/* 三角アイコン */
.you-video::after{
position: absolute;
font-family: "FontAwesome";
content: "\f04b";/* アイコン指定 */
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っぽく見えるようにしています。

YouTubeアイコンを「Font Awesome 5用」にするにはfont-family: "Font Awesome 5 Brands";content: "\f167";に置き換えてください。

以前使っていたテーマ「ストーク」用ですが導入方法はこちら

ストークFont-Awesomeアップデート STORKで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-videoyoutube部分が「埋め込み用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個埋め込んでます。

ダンスミュージック洋楽おすすめ 【思わず踊りたくなる】ノリノリ洋楽おすすめ20曲
なるほどデザイン目で見て楽しむ新しいデザインの本

ご質問・ご感想・受付中

「メールアドレス入力欄」を削除した為「返信通知」は届きません。
確実に返信が必要な場合は「お問い合わせ」または「TwitterのDM」よりご連絡ください。

他の方にも有益になると判断した質問やコメントは記事に引用させて頂く場合がありますのであらかじめご了承下さい。