MENU
100記事いくまでプロトタイプです

【このやり方の載ってるサイトさん、あまりみかけないかも!】WordPressの記事にYouTubeを埋込む以外の動画の埋め込み方

2020 5/18
【このやり方の載ってるサイトさん、あまりみかけないかも!】WordPressの記事にYouTubeを埋込む以外の動画の埋め込み方

[jin-iconbox15]WordPressで記事を書く際に、YouTubeを使う以外の方法で、動画を埋込む方法を知りたい。
パソコン画面上操作などノウハウを示すのに動画で紹介したい。[/jin-iconbox15]

という悩みを解決します。

[box05 title=”結論”]

[jin_icon_check_circle color=”#e9546b” size=”18px”]「メディアを追加」で動画をアップロードする
※ファイルサイズの上限はご利用のレンタルサーバーによって異なります

[jin_icon_check_circle color=”#e9546b” size=”18px”]テキストエディットモードで挿入したい場所に下記のソースを挿入する

<video autoplay=”autoplay” loop=”loop” controls=”controls” width=”【表示したいサイズ横】” height=”【表示したいサイズ縦】”><source src=”【メディアのURL】” /></video>

[jin_icon_check_circle color=”#e9546b” size=”18px”]メディアのURLをコピーする

[jin_icon_check_circle color=”#e9546b” size=”18px”]挿入したソースの【メディアのURL】の部分に貼り付ける

[jin_icon_check_circle color=”#e9546b” size=”18px”]表示したいサイズの横と縦のサイズを調整する

[/box05]

目次

おことわり:責任はとれないので、、、

先に逃げ腰です。ごめんなさい。結論から言うと、このサイトを参考にして何かあっても責任とれません。そして、質問受けても応えられません

ブログを始めてやり方を探りながらやったらうまくできた!ってだけの話で、それがどなたかにお役に立てたらいいかなくらいに思って掲載しています。

一応、このやり方は20くらいサイトを巡って出会いました。ただ、たまたまうまくいった感じかもしれないんです。ですから、信頼性をそんなに抱かないでください。ごめんなさい。

一応、うまくは表示されているので、そんなんでもよかったら試してみて欲しいと思います。

「ちっ、みにきただけ時間の無駄だったじゃねーか」なんて思わせた方はごめんなさい。

動画ファイルを用意したら「メディアを追加」でファイルをアップロード

WordPress使いの人にとってはおなじみ。「メディアを追加」でファイルをアップロード。これは画像を掲載する時と同じ行動ですね。

ただし、レンタルしているサーバーによっては、アップロードファイルの上限サイズが低いものもあってエラー出る人がいるかもしれませんね。

[jin_icon_post color=”#e9546b” size=”18px”]レンタルサーバー ConoHa WING でのphp.iniの編集の仕方。アップロードサイズの変更方法など。|WordPress制作さん

によると、

アップロードサイズはレンタルサーバによって基本設定が違います。

例えば、

ConoHa WING ⇒ 32MB
Xサーバー ⇒ 32MB
ロリポップ ⇒ 8MB 少なっ!
さくらサーバ ⇒ 2MB 少なっ!

[jin_icon_post color=”#e9546b” size=”18px”]レンタルサーバー ConoHa WING でのphp.iniの編集の仕方。アップロードサイズの変更方法など。|WordPress制作さん

とのこと。

こちらのページであげた下記の動画、47秒で17.7MBです。

ちなみに、ファイルアップロード上限値を変更する方法は、検索すればいろんなサイトがでてきます。下記に一例をあげておきますね。

[jin-iconbox10]

[jin_icon_post color=”#e9546b” size=”18px”]WordPressのファイルアップロード上限値を変更する方法|Vector,Inc.さん

[jin_icon_post color=”#e9546b” size=”18px”]メディア(画像や動画)のアップロード上限(2MB)を変更する|Admin Webさん

[jin_icon_post color=”#e9546b” size=”18px”]WordPressでファイルの最大アップロードサイズを変更する方法|Free Styleさん

[jin_icon_post color=”#e9546b” size=”18px”]サーバーのphp.iniによるアップロードファイルの最大容量の確認と容量制限の変更|PHP工房さん

[jin_icon_post color=”#e9546b” size=”18px”]「このサイトのアップロードサイズ上限を超えています」と表示されるとき|WordPress個別指導・カスタマイズ・トラブル対応さん

[/jin-iconbox10]

 

ソースを挿入する

テキストエディットモードにして、動画を挿入したい場所に下記のソースを挿入します。

<video autoplay=”autoplay” loop=”loop” controls=”controls” width=”【表示したいサイズ横】” height=”【表示したいサイズ縦】”><source src=”【メディアのURL】” /></video>

【メディアのURL】【表示したいサイズ横】【表示したいサイズ縦】は、あとでいじります。

挿入したソースの【メディアのURL】の部分に貼り付ける

今一度、メディアを追加をクリックし、掲載したいファイルを選択します。

次に、ファイルのURLをコピーして、先ほど貼り付けたソースの【メディアのURL】と入れ替えます。もちろん【メディアのURL】という文字は削除です。

表示したいサイズの横と縦のサイズを調整する

埋め込んだ動画の表示サイズを調整します。

元の動画をQuickTime Playerで開いて

QuickTime Player > ウィンドウ > ムービーインスペクタを表示 (⌘I)

動画の縦横比を確認します。上記の動画は16:10でした。

それに合わせてサイズを計算し、それぞれ入力しました。

たとえば、横を600にしたいとしたら、

16 : 10 = 600 : X で計算。 答えは、X=375 ですよね。

プロがどうしてるのかは知りませんが、ブログ初心者の僕はなんとなくそうしました。で、まぁ、なんとかなってます。

<video autoplay=”autoplay” loop=”loop” controls=”controls” width=”600″ height=”375″><source src=”【メディアのURL】” /></video>

みたいな感じになるってことですね。ちなみに、widthは横heightは縦です。

これで、完成。プレビューしたら動画が掲載されているはず。

まとめ:動画アップロード → ソース挿入 → 動画URLコピー → ソースにペースト → サイズ調整

以上です。みなさんもうまくいけばいいなーと思います。

こちらの記事を作成するにあたって、画面操作手順を示すのに最初は画像を使っていました。スマホの手順説明は画像を使っていますが、そんなイメージです。

パソコンの画面手順だけで画像が7枚近くなり、スマホの手順でもたくさんの画像。

見る人がしんどい!

スクロールめんどくさい!

直感的じゃない!

ということで、動画を埋められないかなーと思ったわけです。しかし、僕のサーチするスペックが低いからか、はたまた世の中にないからかはわかりませんが、ほっとんどがYouTubeを埋め込む方法。みんな、親切に素敵だなぁ、、、と最初は思っていたものの、さすがに「っちげーんだわ!誰か僕と同じこと考えてる人いないの!!」とイライラしてきまして。

それを救ってくださったのはこちらのサイトさまでした。あなたを見つけたとき神かと思いました。おかげで、使える魔法が増えました。ありがとうございました

[jin_icon_post color=”#e9546b” size=”18px”]WordPressに画面キャプチャ動画を貼り付ける方法| ハッピーdシニアライフ / Blogさん

この記事が気に入ったら
フォローしてね!

目次
閉じる