WordPressのヘッダーに動画を設定する方法

こんばんは、Palmです！

今日はWordPressのトップページに
動画を配置することに成功したので
技術レポートをかきます。

配置するのに４時間くらいかかってしまいましたが、
Google先生にたくさんきいて
なんとかヘッダーに動画を
アップロードすることができました！

それでは説明です！！

プラグイン：WPCodeを使う

ヘッダーに動画を配置するには
HTMLの編集が必要みたいで、
WordPressの管理画面には
そのような編集するところがなかったので

プラグインをさがしてみることにしました。

それがこちらです！

WPCode

早速「有効化」をおしてみましょう！！

サイドバーにある「コードスニペット」の「ヘッダーとフッター」を選択します。

この画面が表示されます。

次に、このように記述します。

私は、スマホの画面のみで表示させたかったので、
classを指定していますが

そうでない方はdivごとを消しておいてもいいかもしれません。

HTMLの記述

<div class="header-movie">
	<video preload="none" autoplay loop muted playsinline >
		<source src="#.mp4" type="video/mp4"/>
	</video>
</div>

playsinline muted：スマホでも再生できるようになります

autoplay：オートで再生できます

loop：ループで再生できます

スマホのみの表示

今回は、「カスタマイズ中追加 CSS」の中を編集しました！

このようにPC用のレスポンシブ対応を設定し
先ほどのclassを設定して

display:none;
を書いて、動画（class=”mobile-movie”）の要素を消してあげましょう。

@media (min-width: 751px) {
    .mobile-movie {
        display: none;
    }
}

解決できなかったこと

トップページ以外にも動画が出てきてしまう。

書いたコードはこちらです。

.homeクラス（Topページ）を指定して

:not()を使ってみましたが
思っていた通りに動きませんでした！！

:not()：クラスやIDなどを除外する性質をもっています。
CSSで扱えるelseのような感じ？？

明日、続きを頑張ってみます！

@media (max-width: 480px) {
    .mobile-movie :not(.home) { 
    display: none;
	}
}

追記

解決できました！

CSSのセレクタが少し間違っているようです。特に body:not(.home) .mobile-movie という部分で、セレクタの間に不要なスペースが入っていました。

あと、mediaの値を480pxから750pxに変更して、もっと多くのスマホサイズをカバーすることによって解決しました。

@media (max-width: 750px) { /* この値を480pxから750pxに変更して、もっと多くのスマホサイズをカバー */
    body:not(.home) .mobile-movie {
        display: none;
    }
}

まとめ

今回はトップページに動画を配置することができました。

しかし、まだまだCSSを理解できておらず、
トップページ以外も動画が表示されて困っています。

力がある方は貸してください(´；ω；`)

最後まで読んでいただきありがとうございました！

Palm

東京通信大学

XContact

Blogger✍Developer🛠Designer👩‍💻様々な言語に特化😏語学とプログラミングを学べる外語ビジネス専門学校を卒業後、東京通信大学に編入。中国語が好き。ICPC参加歴あり。これまで長期webインターンに参加し、現在長期iOSインターンに参加中である。ハッカソン2連続受賞中。