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

広告

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

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

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

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

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

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

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

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

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

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

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

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

-- --

もし、記事の作成画面で URL を貼り付けた時にリンクの設定画面が表示されなかった場合は、貼り付けた URL を選択してから「リンク」アイコンをクリックしてください。

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

リンクの設定画面が表示されましたら、テキストボックスに YouTube の URL が入力されているのを確認の上で「プレビュー」をクリックしてください。

YouTubeの動画のURLを貼り付ける(7)

形式として「埋め込み」を選択し、その後で「選択した形式でリンクを挿入」をクリックしてください。

YouTubeの動画のURLを貼り付ける(8)

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

YouTubeの動画のURLを貼り付ける(9)

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

YouTubeの動画のURLを貼り付ける(10)

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

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

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

共有方法の選択画面が表示されますので「埋め込み」をクリックしてください。

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

動画の埋め込み用コードが表示されます。「コピー」をクリックしてコードをコピーしてください。

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

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

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

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

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

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

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

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

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

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

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

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

-- --

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

( Written by Tatsuo Ikura+ )

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

著者 / TATSUO IKURA

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