Google Earth 動画を YouTube 経由で レスポンシブ対応 SSL サイトに埋め込み

作成した動画

地球全体が見渡せる位置から、ある特定の場所まで Zoom In する動画を作成し、YouTube にアップ。その動画を、レスポンシブ対応のワードプレスサイトに埋め込みました。

特に、難しいことを行ったわけではありませんが、若干戸惑ったポイントをメモ書きしました。

目次
  • Google Earth Pro で、動画を作成し、
    YouTube にアップ
  • httpsサイト上に、YouTube 動画を埋め込み
  • YouTube動画をレスポンシブ対応

Google Earth Pro で、動画を作成

Google Earth Pro を利用して、宇宙からある特定の場所までのズームイン動画 作成しました。

この投稿を作成している段階では、Google Earth、Google Earth Pro 両方が存在しています。どちらも無料ですが、作成した動画を YouTube にアップするには、Google Earth Pro が必要です。

Google Earth ( Pro ) を利用した動画の作成方法は、いろいろなサイトに掲載されていますので、そのサイトをご参照ください。

私は、「GoProとEOSと旅行と釣りと・・・道楽ブログ」を参考にさせていただきました。

httpsサイト上に、YouTube 動画を埋め込み

通常は、該当する YouTube 動画のアドレスを、ダイレクトに記載すれば YouTube 動画は、簡単に埋め込まれるのですが、ページが表示された時に、自動で再生が始まるようにしたかったので、Google YouTube IFrame Player API (リファレンスページ に記載されているサンプル script )を、そのまま使用しました。(videoId と setTimeout は変更しています。)

下記のような、簡易的な埋め込み方法は、httpsサイトでは、利用できないみたいです.

<iframe id="player" type="text/html" width="640" height="360" src="http://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1&origin=http://example.com" frameborder="0"></iframe>

YouTube動画をレスポンシブ対応

YouTube動画を、レスポンシブ対応にするには、スタイルシート上で、ちょっとだけ細工が必要みたいです。「Youtubeの埋め込み動画をレスポンシブに対応させる方法」のサイトを参考にさせていただきました。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です