株式会社ズコーデザイン
むかい
管理画面
カンタン！動画の埋め込み、マップの埋め込み方法
お久しぶりのゆきなです。
「動画をホームページに埋め込みたい！」
「Googleのマップを埋め込みたい！」
「動画を作成したのでホームページに載せたいのですが、どのようにすればよいですか？」と時々お問い合わせいただくことがございます。
今回はとってもとってもとてつもなく簡単に動画やマップを埋め込める方法がございますので紹介させていただきたいと思います！
動画を埋め込みたい場合
①まずはYoutubeアカウントを作りましょう。
動画を作成したら、まずはYoutubeアカウントを作りましょう。
動画を掲載しているどのホームページでも、動画はYoutubeにアップロードしているパターンがほとんどです。
直接動画データをホームページに埋め込むよりも、Youtubeを介して表示させるほうが、他の動画も見てもらいやすくなりますよね。
②アップロードした動画の右下をチェック
動画をアップロードし、再生画面へいくと、右下のグッドマークとバッドマークの隣に「共有」というボタンがあります。
こちらをクリックすると、共有用のアドレスの上に「埋め込む＜＞」というボタンがあるのでクリックしてください。
③難しそうなコード登場
埋め込みボタンを押すと、なにやらiframe～～～などのワケの分からんコードが出てまいりました。
この訳のわからんコードが、サイトに掲載する際に必要な埋め込みコードになります。
恐る恐るこのコードにクリックすると、文字全体が選択されるので、文字をすべてコピーしましょう。
あとはこのコードを然るべき場所にペーストすれば、簡単にサイト内に動画を埋め込むことができます。
今回は弊社の管理画面を使って埋め込んでみます！
管理画面に、動画埋め込み用の入力項目があるんです。
弊社の管理画面をご使用の方は管理画面の編集画面をスクロールした下の箇所に追加動画(youtube埋め込み)という入力項目があります。
ここ！ここここ！
ここにそのままコピーした埋め込みコードを貼り付けちゃってください
すると、こんな感じで動画が埋め込まれます。
あら、簡単。もう埋め込み完了です。
ちなみに余談ですが、、この動画BBCが運営している「BBC Eath」というチャンネルなのですが、かなりスペクタクルです。カンガルーむっきむきです。ぜひご覧あれ！
GoogleMAPも同様に
店舗アクセス用にマップを埋め込みたい！という時も同じ要領で実に簡単に埋め込むことができます。
Googleマップにアクセスし、対象の場所をクリックします。
場所が登録されていればこのように表示されるのですが、こちらにもあの「共有」のボタンがあります！
クリックすると”リンクのコピー”などと一緒に上のタブに「地図を埋め込む」という文字があるのでそちらをクリック
またでました。iframeから始まる訳のわからんコードです。
Googleさんは親切なので「HTMLをコピー」をクリックすると、自動でコードをコピーしてくれます。
あとはこのコードを然るべき場所にペーストするだけ。
管理画面の場合は同じ追加動画(youtube埋め込み)の項目を使って貼り付けるとよいと思います。
おまけ：埋め込みサイズの調整について
「iframe～」から始まる埋め込みコードに実はサイズを変更できるコードがあります。
それがコード内のこちらの箇所
<iframe width="560" height="315" src="https://www.youtube.com/embed/Ss5S3yiGxg8" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
widthは動画の横幅の数値を表し、heightは動画の縦の幅を表しています。
数字のみの表記になりますが、単位はpx（ピクセル）です。
デフォルトがwidth="560" height="315"なので、さきほど埋め込んだサイズが初期設定のサイズになります。
もう少し大きくしたいなどの場合はこちらを書き換えると大きくなりますが、最近はレスポンシヴ（デバイスによってサイズが可変する）サイトが基本になっているので
むやみにPCサイズに合わせて数字を変更すると、スマホで見たときに大きくはみ出てしまっている！！なんてことがあるので変更される際には注意しましょう！
更新中にお悩みがでてしまったら、いつでもお問い合わせくださいませ。
管理画面の操作マニュアル、あります。
このブログページのタグ一覧に「管理画面マニュアル」というものがあるのですが、こちらをクリックしていただくと
弊社の管理画面の操作方法をページごとにご確認いただくことができます。
こちら、管理画面にログインいただいた後、右上に表示されるアイコンをクリックしたところにも操作マニュアルへのリンク先をご用意しております。
操作中、操作方法に迷われたら是非参考にしてみてください。
ほとんどのページはこちらのマニュアルを参考にしていただけるかと思いますが、
「私のサイトのこのページはマニュアルのどの項目？」と迷われた方はお問い合わせください！
最後に雑談～
動画の埋め込み、もうご存じの方もおられたかもしれませんが、私の場合、最初はこのiframeの埋め込みコードに怯えていたので、あの頃の気持ちを思い出しながら書いてみました。
参考になりましたら幸いです！
それにしても、、自粛続きでほんとになんとも息苦しい日々が続いておりますね！
どれだけ嘆いても今となっては仕方のないことではありますが、行きたいところ、パァっとやりたいことが多すぎて、、お部屋で椅子に座りながら、言いようのない不満が身体にしみこんでいるのを、変な動きでジタバタさせて発散させております。
閉塞感の続く日々ですが、そんななか弊社へお問い合わせをいただき、新しいご縁をいただけるお客様とのやりとりがとてもとてもありがたく感じております。
まだまだ緊張しながらの不慣れなところもありますが、心の中ではお花が揺れてます。いつもありがとうございます！