人生万事ドーパミン!

自由奔放に、前向きに、コレが一番大事!

はてなブログ記事にYouTube動画を取り込む方法

f:id:makiyagaku:20200208180603j:plain

先日投稿した、続・野鳥も猫可愛がりするのだ!記事内で、

makiyagaku.hatenablog.com

YouTubeにアップした動画を、はてなブログの記事に埋め込みたい、という悩みを書いたところ、JuneNNNさんから、はてなブックマークにこんな書き込みをいただいた。

f:id:makiyagaku:20200208171156j:plain

おお!ありがたや!!

早速、試してみたところ、見事うまくいったので、今回は、

YouTubeを使ってはてなブログを動きのあるブログにするための詳細レポート!をお送りするぞ!

 

まず、YouTubeの画面を見てみよう。

スマホで撮影した画像はYouTubeに投稿すると、こんな感じで公開されているのだ。

JuneNNNさんの教えてくれた、共有ボタンを、右下に発見したぞ!

f:id:makiyagaku:20200208172340j:plain

共有ボタンをクリックしてみると、こんな画面がポップアップした。

JuneNNNさんのいうとおり、埋め込むボタンを一番左に発見!

 

f:id:makiyagaku:20200208173010j:plain

埋め込むボタンをクリックしてみる。

すると、こんな画面になった。

 

f:id:makiyagaku:20200208173510j:plain

なるほど、この青いハイライト部分の文字列が埋め込みコードというやつらしいね。
コピーボタンが下にあるぞ。
では、コピーして、いよいよはてなブログの編集画面に行くぞ!

 

はてなブログの投稿画面にそのまま貼り付けたら、文字列が貼りついただけだった

失敗なり!

BUT!、HTML編集に切り替えて、貼り付けたら、こんなふうに、YouTube画面そのまま!に表示されるようになったぞ!

 本当は、このプレーヤー表示でなくて、記事上に、野鳥が動いている動画をそのまま載せたかったから、

☑プレーヤーのコントロールバーを表示する

チェックを外して、再度貼ってみた

あれ?

YouTubeのロゴが入っただけで、その他は大きな変化ないみたいだ。

BUT!、実際にブラウザで見たら、変化あるのかもしれないね。

 

では、これで、今回の実験は終了。

JuneNNNさん、今回もご協力ありがとうございました!

JuneNNNさんにゃにゃにゃ工務店最新記事はコチラから

junemutsumi.hatenablog.com