株式会社グローバルゲート公式ブログ

Blog

2020-04-07

意外と簡単 ホームページに動画や地図を埋め込む方法

youtubeタグの取得と埋め込み
こんにちは、グローバルゲートのディレクター、ノーさんです。
皆さん動画はお好きですか。お好きですよね。
私も好きです。

最近は動画撮影や編集のハードルもかなり下がり、youtubeに投稿する機会も増えてきたかと思います。
こちらでは、youtubeに投稿した動画を自分のホームページやblogに埋め込む方法をご紹介します。
埋め込みには、少しだけhtmlの知識が必要になります。

弊社ソフトウェア「WebChanger」を使用しての埋め込み方法もご紹介しますので、
ご使用の方は是非とも参考にしてみてください。



動画を埋め込みたい場所を確認する

色々な方法がありますが、慣れないうちはまず動画を埋め込みたい場所に、
わかりやすく文章を入れた方が良いでしょう。
例として、「ここに動画を埋め込みます」という文字を入れておきます。
<div class="module text-center">
<p>
ここに動画を埋め込みます
</p>
</div>
動画埋め込み場所を確認

埋め込みたいyoutube動画のiframeタグを取得する

それでは、youtubeから動画をhtml内に埋め込む為の「iframeタグ」を取得しましょう。


まずは、埋め込みたいyoutube動画のページを開きます。
youtube動画ページ


動画の右下に「共有」というボタンがありますので、そちらをクリックします。
共有ボタンをクリック


このような「共有」の画面になりますので、左端の「埋め込む」ボタンをクリックします。
共有画面


「埋め込む」ボタンをクリックすると、このような画面になります。
埋め込み画面


右側の赤のカギカッコでくくった部分を、マウスで選択してコピーしてください。
タグのコピー


コピーしたiframeタグをhtmlに貼り付ける


コピーしたタグを、先ほどの「ここに動画を埋め込みます」の部分に上書きで貼り付けます。
<div class="module text-center">
<p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/M0fOBCTATKU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</p>
</div>


以上で、このように無事動画を貼り付ける事ができました。
上の3行目、「width=”560″ height=”315″」の部分の数字は、横・縦のサイズ指定なので、
数値を変更すると、埋め込みサイズを変える事もできます。
色々試してみてください。
動画の貼り付け完了


Google Mapをサイト内に埋め込む


Google Mapの埋め込みも、手順はyoutubeの埋め込みと同様です。
まずは埋め込む場所を確認しましょう。

<div class="module text-center">
<p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/M0fOBCTATKU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</p>
<p>
こちらに地図を埋め込みます
</p>
</div>
地図の埋め込み準備

埋め込みたいGoogleMapのiframeタグを取得する

では、動画と同様にGoogleMapをhtml内に埋め込む為の「iframeタグ」を取得しましょう。
まずは、GoogleMapを開き、中心にしたい場所をクリックしましょう。
ここでは大阪メトロ中央線の本町駅を選択しました。
本町駅


本町駅をクリックすると、左側に詳細が出てきますので、5つあるアイコン右端の「共有」をクリック、
「共有」をクリックすると、画面中央に共有のメニューが出てきますので、「地図を埋め込む」をクリックしてください。
共有メニュー


「地図を埋め込む」をクリックすると、iframeタグが出てきます。
ifameタグの右側にある「htmlをコピー」をクリックしましょう。これでiframeタグの取得は完了です。
iframeタグの取得


コピーしたGoogleMapのiframeタグをhtmlに貼り付ける

あとはyoutubeのiframeタグの埋め込みと同じです。
先ほど地図の埋め込み準備をした箇所に、コピーしたiframeタグを貼り付けましょう。
<div class="module text-center">
<p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/M0fOBCTATKU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</p>
<p>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d689.7294900231607!2d135.49866100761383!3d34.68184564755401!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6000e71df3ac9023%3A0x41606f98435e0ac!2z5pys55S66aeF!5e0!3m2!1sja!2sjp!4v1586158638871!5m2!1sja!2sjp" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
</p>
</div>
地図の埋め込み完了

Wordpress等blogの場合は、youtubeもGoogleMapもhtmlモードに変更して該当箇所にコピーしたタグを貼り付ければ
埋め込みできますよ!


WebChangerを使用したyoutubeやGoogleMapの埋め込み方法

弊社WebChangerの場合はhtmlの操作が不要なので、非常に簡単です。
まずはyoutubeでもGoogleMapでも結構です、上記と同じようにまずは埋め込みたいiframeタグを取得してください。

そして、WebChangerを立ち上げ、Youtubeを埋め込みたいページをエリア編集で開いてください。
埋め込みたい場所に、テキストエリアをペーストします。
(中央に貼り付けたい場合は中央揃えのテキストエリアを、左寄せにしたい場合は左揃えのテキストエリアをコピーしてください。
 下の写真では、ブロック8の中央揃えのテキストエリアをブロック1の上にコピーしました。)
WebChangaerのエリア編集


エリア編集を保存して終了し、そのまま内容変更画面に入ってください。
内容変更画面へ移行


増やしたテキストエリアをダブルクリックし、内容変更ウィンドウ左下の「html直接編集モード」をクリックしてください。
html直接編集モード


4分割画面の右下「新しい状態」部分に、コピーしたiframeタグを貼り付けてください。
すぐにプレビューで左側にyoutube画面が出てきますね。
これでピンク色の編集確定ボタンを押してください。
html直接編集モード2


以上でyoutubeの埋め込み完了です。
動画のサイズを変更したい場合は再度直接編集モードで、width(横幅)やheight(縦幅)の数値を変更してください。
youtubeの埋め込み完了


弊社WebChangerを使用すると、htmlの知識がなくても動画やGoogleMapの埋め込みだけでなく、
ホームページの更新やコンテンツの作成が簡単にできます。
お気軽にお問い合わせください!

ご相談・お問い合わせ

当社サービスについてのお問い合わせは下記までご連絡下さい。

お電話でのお問い合わせ

06-6121-7581 / 03-6415-8161