【WordPress】Youtube風にデジカメの映像を載せる手順【デザインアプリ】
この記事にはプロモーションが含まれています
動画をWordPressに埋め込みたいんだけど再生どころか、表示もされない。Youtubeに上げるまでもないし、暖簾と屏風は広げたくない。それでもYoutubeっぽく動画をきれいに載せる手順が知りたいです。こういった疑問に答えます。
こういった疑問に答えます。
早速ですが、仕上がりの見た目はこんな感じです。
【プラグインなし】WordPressでYoutube風にデジカメの埋め込む手順のまとめ【デザインアプリ】
こんにちはユウキです。プラグインなしでデジカメの映像をサイトに埋め込む方法をまとめました。動画は載せたいけれど、Youtubeに暖簾を広げたくない。Youtubeのようにきれいに載せたいけれど、プラグインは使いたくない。結論：両方可能です
Youtube風にデジカメの映像を載せる手順
1.撮影する
2.デザインアプリに上げる
3.メディアファイルにアップロード
4.プレビューで検証あとはHTMLと追加CSSで完了です。
— ユウキ@ブログ×体の使い方 (@yukitakeblog) March 27, 2024
1.撮影する
2.デザインアプリに上げる
3.メディアファイルにアップロード
4.プレビューで検証
スマホで撮った人は「3.メディアファイルにアップロード」へどうぞ。
動画ファイルを載せる手順
1.撮影する
まず撮影しましょう。撮らないと始まりません。最近はカメラの性能が良くなっただけではなく、通信規格も５Ｇから６Ｇで１０ギガな時代です。なので、画面の大きさは、4K(3840×2160)でも余裕でＯＫですが、気になるときはFull HD(1920×1080)でも十分きれいに映ります。
2.デザインアプリに上げる
「撮影完了♬」あれ？映らない、下がる⤵⤵⤵
という理由から、ここで挫折する人が大半です。理由は簡単です。
拡張子がMP4じゃないからです。デジカメで撮った動画ファイルの拡張子はMOVなので、デザインアプリでMP4に作り替えます。
拡張子を「名前の変更」で書き換えることも可能かもですが、「ファイルの破損のち、もれなく撮り直し」になるので、ここは素直に先輩諸兄の言うとおりにデザインアプリを使いましょう。
まずアップロード
撮った動画をさっそくデザインアプリで改造します。といっても簡単です。ざっくりいうと「アップロードして貼るだけ」です。
やり方
- 1.左側ツールの下の方にある「アップロード」をポチる
- 2.「アップロードするファイルを…」をクリック
- 3.完了するまでちょい待って
- 4.貼りつける
- 5.載せる時間を編集する
- 6.高さを合わせて完成
現在のメディアは、ほとんどの場合「16:9」なのですが、人によっては「両端が切れてる、4:3」で撮る人もいます。その場合は、
- 1.高さをそろえる
- 2.ガイドに従って真ん中に置く
高さと位置は、ピンクの線が出ると同時に止まってくれることで教えてくれます。
超簡単。
忘れずダウンロード
- 1.画面右上にある共有をクリック
- 2.形式をMP4にする(既にMP4なのでいじらなくていいです)
- 3.ダウンロードをクリック
- 4.「名前を付けて保存」の画面がでたら、名前を入れる
- 5.保存をクリックして、ダウンロードの完了です
3.メディアファイルにアップロード
- 1.WordPressにログインする
- 2.左側のツールバー、「メディアファイル」をクリック
- 3.「新規メディアの追加」をクリック
- 4.ドラック&ドロップしてアップロード
【超重要】HTMLにURLをコピーする
URLをじか貼りしたいところですが、ここでコーディングします。これが一番大事なポイントです。
コーディングをしないとサイトの見映えのバランスが崩れるだけではなく、再生できないということにもなります。
なので
- 1.メディアの追加をクリック
- 2.右側ツールの下にスクロール
- 3.「URLをコピーする」をクリック
- 4.用意しておいたHTMLコードの「src=””」の「””」の間にURLをペースト
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>これで終わりです。
そのCSSコードと使い方
【書き換えのみ】Youtubeコードのビデオ化【プラグインなし】
ビデオファイルをYoutubeっぽくする方法は簡単です。・CSSの追加テーマファイルエディターのstyle cssにある「youtube」のコードをメモ帳にコピった後、クラス名を書き換えて、追加CSSに貼り付けるだけ。プラグインのトラブルもなければ、横スクロールもありません。
その元記事
4.プレビューで検証
投稿の前にプレビューでレイアウトの崩れがないか確認します。
やり方
- 1.「F12」を押す
- 2.画面右側の一番上にある水色の横棒の左から二番目のパソコン・スマホのアイコンらしきものをクリック
- 3.画面がスマホっぽくなったら、左上のスマホの名前をクリック
- 4.iPhoneの最新機種をクリック
- 5.見やすいように大きさを100%にする
Youtubeの埋め込み画面と違い違和感があるのならば、追加CSSの.VideoWrapper iframeのwidthの数字を変えて調節します(デフォルトは90%で左によって見える)。
追記
スマホのレイアウトに合わせてwidthの数字を大きくすると、デスクトップでは右側がはみ出て、レイアウトが崩れます。なので数字はいじらないほうがいいです。
というか、そもそもビデオはYoutubeではないので「まったく同じ」にすることは不可能です。
見映えはこんな感じです
16:9【4K(3840×2160)とFull HD(1920×1080)】
4:3【VGA(640×480)】
両端の差分
Canvaでの作成時に背景の色を変えられます。白が初期設定で、上が「背景色：黒」に変更後です。
終わり。