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編集

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

Cyberduckと子テーマの使い方 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を20個埋め込んでます。

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

チャージ額に応じてポイントが貯まります。

プライム会員」なら最大2.5%ポイント還元!!貯まったポイントは次回のお買い物から使えます。さらに、今なら初回購入1000ポイントキャンペーン中!!

※キャンペーン条件がやや複雑なので不安な方は下記の手順を確認してください

STEP1

キャンペーンページへ

Amazonギフトポイント付与キャンペーン

STEP2

エントリー完了後、「Amazonギフト券チャージタイプ」をクリック

Amazonギフトポイント付与キャンペーンエントリー

STEP3

キャンペーン条件の5000円以上を選択または自由金額を5000円以上に入力次へをクリック

Amazonギフトチャージタイプ購入

STEP4

Amazonギフトチャージタイプ支払い方法選択PC

「コンビニ・ATM・ネットバンキング払い・電子マネー払い」を選択次に進むをクリック


STEP5

注意×10

特に何もせず注文を確定するをクリック

Amazonギフトチャージタイプ購入PC

以下キャンペーン条件から外れてしまうトラップについて。

  • 支払い方法の「電子マネー」はNG
  • Amazonギフト券・Amazonショッピングカード・クーポンも使用できるようになっていますがNG
  • 2000円以上で200ポイントも初回特典ですが、チャージは対象外なのでこちらを選択すると本来1000ポイントもらえるのに200ポイントになってしまうのでNG

私はAmazonヘビーユーザーですが、このキャンペーンに関してはユーザーを欺くようなUX(導線)でよろしくないなと思いました。


STEP6

Amazonギフトチャージタイプ購入確認メール

Amazonに登録してるメールアドレスに「お支払い番号のお知らせ」メールが届きます。お支払い方法別の手順」のリンクをクリックしてください。


STEP7

Amazonギフトチャージタイプ支払い確定PC

もう一度言っておきますが、ここで「電子マネーでの支払い」を選択しないように注意してください。

それ以外の支払い方法をクリックすると詳細が載っているので、期限である6日以内に支払いを済ませて完了です。

以上がキャンペーンの手順です。注意点に気をつけながらぜひこの機会に1000ポイントGETしてください。

プライム会員」なら最大2.5%ポイント還元!!

※チャージした金額の有効期限は安心の10年間

ご質問・ご感想・受付中

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

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