記事にVimeoの動画を埋め込む

広告

はてなブログでは Vimeo に投稿された動画を簡単に埋め込むことができます。埋め込まれた動画はブログ上で再生することができます。ここでは「はてなブログ」の記事 Vimeo の動画を埋め込む方法について解説します。

Vimeoの動画のURLを貼り付ける

Vimeo に投稿された動画を「はてなブログ」の記事に埋め込む方法です。例として次の動画を埋め込んでみます。

Vimeoの動画のURLを貼り付ける(1)

一つ目の方法は埋め込む動画の URL を取得して、記事の編集画面に貼り付ける方法です。 Vimeo で表示している動画の URL はブラウザのアドレスバーに表示されている URL です。

Vimeoの動画のURLを貼り付ける(2)

はてなブログで記事の新規作成画面を開き、動画を埋め込みたいところにカーソルを合わせたあと先ほどの Vimeo の動画の URL を貼り付けてください。

Vimeoの動画のURLを貼り付ける(3)

リンクの設定画面が表示されます。形式として「埋め込み」を選択し、その後で「選択した形式でリンクを挿入」をクリックしてください。

Vimeoの動画のURLを貼り付ける(4)

カーソルがあった位置に Vimeo の動画が埋め込まれました。

Vimeoの動画のURLを貼り付ける(5)

記事を投稿して公開してみると、次のように Vimeo の動画が記事の中で表示され、動画の再生も記事上で行うことがでできます。

Vimeoの動画のURLを貼り付ける(6)

Vimeoの動画埋め込み用コードをHTML編集画面で貼り付ける

二つ目の方法は動画の埋め込み用のコードを取得し、はてなブログの HTML 編集画面から貼り付ける方法です。 Vimeo の画面で埋め込みたい動画のページを表示したあと、動画の右下に表示されている「共有」をクリックしてください。

Vimeoの動画埋め込み用コードを使う(1)

共有方法の選択画面が表示されます。「埋め込み」の下に表示されているコードをコピーしてください。

Vimeoの動画埋め込み用コードを使う(2)

はてなブログで記事の新規作成画面が開き、画面上部の「HTML編集」タブをクリックしてください。

Vimeoの動画埋め込み用コードを使う(3)

記事の HTML 編集画面が表示されます。動画を埋め込みたいところに先ほどコピーした動画の埋め込み用コードを貼り付けてください。

Vimeoの動画埋め込み用コードを使う(4)

Vimeoの動画埋め込み用コードを使う(5)

画面上部の「編集 見たまま」をクリックしてください。

Vimeoの動画埋め込み用コードを使う(6)

埋め込み用コードを貼り付けた位置に Vimeo の動画が埋め込まれているのが確認できます。

Vimeoの動画埋め込み用コードを使う(7)

記事を投稿して公開してみると、次のように Vimeo の動画が記事の中で表示され、動画の再生も記事上で行うことがでできます。

Vimeoの動画埋め込み用コードを使う(8)

-- --

はてなブログに Vimeo の動画を埋め込む方法について解説しました。

( Written by Tatsuo Ikura+ )

関連記事 (一部広告含む)
Profile
profile_img

著者 / TATSUO IKURA

初心者~中級者の方を対象としたプログラミング方法や開発環境の構築の解説を行うサイトの運営を行っています。