2024/03/26 (更新日: 2024/04/17)

【書き換えのみ】Youtubeコードのビデオ化【プラグインなし】

その他 テンプレート

この記事にはプロモーションが含まれています

WordPressサイトに動画を埋め込むときのレスポンシブ化のテクニックです。

プラグインを使う方法もあるのですが、、、バグの元になりますし、ちまちまとくるアップデートも面倒いです。
なのでプラグインなしでレスポンシブ化を目指しましょう。

早速こういう投稿をしました。

ビデオファイルをYoutubeっぽくする方法は簡単です。

✅CSSの追加

テーマファイルエディターのstyle cssにある「youtube」のコードをメモ帳にコピった後、クラス名を書き換えて、追加CSSに貼り付けるだけ。
プラグインのトラブルもなければ、横スクロールもありません。

— ユウキ@ブログ×体の使い方 (@yukitakeblog) March 27, 2024

完成イメージ

このページはそれぞれ違う方法でmp.4ファイルを埋め込んだのですが、収まりが良くないですかね？
YoutubeWrapperのCSSを参考に書き換えたからです。
Youtubeではないのでスマホのときは配置に違和感がありますが、「横スクロール」が出ないので、みんなCSSでひと手間かけることを惜しまないのかもですね！！

どうしたらレスポンシブ化できるのか？その秘密は、繰り返しですがCSSにあります。
CSSとはHTMLやコードに見た目をつけることでして、これを使うことで見てくれをよくすることができます。詳しく知りたい方はググってください。とはいえ、ぶっちゃけ知らなくても実装可能です。

Videoをレスポンシブ化するHTMLコード

<div class="VideoWrapper"><iframe loading="lazy" width="560" height="315" src="" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>

これだけ。src=""の部分にメディアにアップした動画のファイルのURLを貼りつけます。
あとは、これを乗せたいところに貼りつけましょう。

以上で完了。
簡単すぎ\^o^/
\^o^/\^o^/\^o^/

重要：Videoの横幅を収めるCSS

.VideoWrapper{
	position:relative;
	margin-top:1.2em;
	margin-bottom:60px;
	padding-top:69px;
	padding-bottom:50%;
	overflow:hidden;
}

.VideoWrapper iframe {
	position:absolute;
	top:0;
	left:0;
	height:100%;
	width:90%;
	padding:0px 5%;
}

@media only screen and (max-width: 479px)

このときに利用したCSSコードです。
「外観→テーマファイルディタ―→style css」の順にポチってもらって、「Ctrl＋F」でyoutubeと検索します。
すると、色づけされたところで、マナブさんがサイト内で紹介しているテンプレートコードと同じようになっているところをコピーします。

.youtubeWrapper{
	position: relative ;
	margin-top: 1.2em ;
	margin-bottom: 1.2em ;
	padding-top: 69px ;
	padding-bottom: 50% ;
	overflow: hidden ;
}

.youtubeWrapper iframe {
	position: absolute ;
	top: 0 ;
	left: 0 ;
	height: 100% ;
	width: 100% ;
}

CSSコードですが、使用しているテーマに実装されているYoutube関連のそれを使うことが正解です。理由は簡単。「なじみがいいから」。
そのあとに、下記のようにコーディングしました。

.VideoWrapper{
	position:relative;
	margin-top:1.2em;
	margin-bottom:60px;
	padding-top:69px;
	padding-bottom:50%;
	overflow:hidden;
}

.VideoWrapper iframe {
	position:absolute;
	top:0;
	left:0;
	height:100%;
	width:90%;
	padding:0px 5%;
}

@media only screen and (max-width: 479px)

@media only~も記述もお忘れなく。

最後に

「外観→カスタマイズ→追加CSS」に行き、

.VideoWrapper{
	position:relative;
	margin-top:1.2em;
	margin-bottom:60px;
	padding-top:69px;
	padding-bottom:50%;
	overflow:hidden;
}

.VideoWrapper iframe {
	position:absolute;
	top:0;
	left:0;
	height:100%;
	width:90%;
	padding:0px 5%;
}

@media only screen and (max-width: 479px)

を貼りつけて、「公開」を忘れずにクリックします。

あと、最後に、width:90%;の部分は幅をいじったらデスクトップのレイアウトが崩れるのでおすすめしません。
そもそもYoutubeではないので全く同じにする必要なしですね。

見た目はこんな感じになります\^o^/

終わり。

テンプレート

• facebook
• Tweet
• hatebu
• LINE
• Read Later