【プラグインなし】WordPressでYoutube風にデジカメの埋め込む手順のまとめ【デザインアプリ】

ユウキ

2024年3月28日 20:47

こんにちはユウキです。
プラグインなしでデジカメの映像をサイトに埋め込む方法をまとめました。

動画は載せたいけれど、Youtubeに暖簾を広げたくない
Youtubeのようにきれいに載せたいけれど、プラグインは使いたくない

結論：両方可能です

前半：動画作成の手順
後半：動画をきれいに埋め込む方法

に分けて書きます。

早速ですが、こういうふうに仕上がります。

前半：動画作成の手順

撮影する
デザインアプリに上げる
メディアファイルにアップロード
MP4形式でダウンロード

1.撮影する

まず撮影しましょう。デジカメで撮影した場合、そのままWordPressに乗せても映りません。

理由は拡張子です。

デジカメで撮影した動画ファイルは拡張子が.MOVですが、WordPressに乗せられるのは.mp4形式のファイルです。なので改造します。

2.デザインアプリに上げる

とはいえ、作業自体は簡単です。デザインアプリのCanvaに動画を上げるだけです。そのあと、ダウンロードするときに、すでに設定されている.mp4形式でダウンロードするだけ。

超簡単^o^/
^o^/^o^/^o^/

3.メディアファイルにアップロード

改めてWordPressにファイルを上げます。新規投稿の画面でも十分なのですが、動画のURLがコピーできないときがなぜかあるので、面倒ですが、メディアから新規追加をクリックしてから、ファイルをドラック&ドロップするか、ひとつひとつクリックしながら動画を上げます。

4.動画を埋め込む

さぁ、動画を埋め込みたいところですが、もう少しの我慢です。
ここから動画をきれいに埋め込む手順を解説します。

いえいえ甘ったれてはいけませんよ。
トップブロガーはみんなこの道を通ってきました。

後半：動画をきれいに埋め込む方法

さて、もうひと頑張りです。アップロードした動画をコーディングします。といってもやることは

コピぺだけ

です。
手順は下記の２つです。

Videoをレスポンシブ化するHTMLコード
重要：Videoの横幅を収めるCSS

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

<div class="VideoWrapper"><iframe 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^/

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

動画の横幅を調節する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)

これをWordPressに貼り付けます。ブログの場合は、

左側ツールの外観をクリック
カスタマイズをクリック
追加CSSをクリック
コピィしたCSSコードを貼りつけ
「公開」をクリックして完了

CSSコードですが、使用しているテーマに実装されているYoutube関連のCSSをコピぺして使うことが正解です。理由は簡単。「なじみがいいから」。
クラス名をYoutubeから変えることをお忘れなく。

余談：テーマファイルディタはいじらないこと

テーマファイルディタをいじると

サイトが壊れる

という地獄を見ます。なので、追加CSSにします。

まとめ

前半：動画作成の手順→デザインアプリ
後半：動画をきれいに埋め込む方法→コーディング

終わり。

この記事が気に入ったらサポートをしてみませんか？