Youtube埋め込みする方法
kusoimox.hatenablog.jp
で紹介した”【物理エンジン】落下するエレベーター、助かるのに必要な脚力は?”ですが,はてなブログの編集サイドバーの”YouTube貼り付け”の検索では中々見つからず,
ブログ内に埋め込むにはどうしたらよいか分からなかった...以前もこういうことがあったんで,ググったらすぐに分かった.
以下のサイトに助けられたって感じです.
pea-nut.hatenablog.com
以上を参考に例として,”【物理エンジン】落下するエレベーター、助かるのに必要な脚力は?”を勝手に使わさせていただいてやってみよう.
注意として,Markdown記法モードで編集してる事前提です.それ以外の編集方法では,やり方が同じかどうかわかりませんので,注意してください.
あと,載っけたスクショが小さすぎると思いますので,クリックして拡大等をしてください.
まず,所望のYouTube動画をウェブブラウザで開き,図1の青で囲んだ共有ボタンをクリックしてください.
クリックすると,図2のようなポップアップていうのかな?,とにかく選択メニューが開きます.メニューの中から,図2で赤で囲んだ”埋め込む”をクリックします.
そして,クリックすると,図3のウィンドウが表示されます.図3で緑で囲んだところを丸ごとコピペし,Markdown記法で書いてる記事編集画面にペーストします.これで,YouTube動画が埋め込まれました.
以下のように記事に書かれていると思います.しかし,これでは,はてなブログの編集サイドバー機能を使った時と少し違うというか,足りません.
<iframe width="560" height="315" src="https://www.youtube.com/embed/rBfwR15Ey3M" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
そこで,以下のように<iframe>
タグの後ろに<br>
タグを書いてください.<br>
タグのhrefにはwwwを抜いたYouTube動画のURLを指定し,タグの間には表示させたいテキスト(通常は動画のタイトル
を打ち込むと思うが,それ以外でも可)を入力してください.これで,編集サイドバー機能を使わずに編集サイドバー機能と同じようにYouTube動画の埋め込みができました.
<iframe width="560" height="315" src="https://www.youtube.com/embed/rBfwR15Ey3M" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe><br><a href="https://youtube.com/watch?v=rBfwR15Ey3M">落下するエレベーター、助かるのに必要な脚力は?</a><br>
以下に実際に埋め込んだ結果を示します.
サイトのリンク添付方法
"https://www.youtube.com”を例に幾つか書き方を示します.
[ようつべ](https://www.youtube.com)
:[]内に表示されるテキストを,()内にURLを書く方法です[https://www.youtube.com:title]
:[]内にURLを書く.URLの後ろに”:title”と書く[https://www.youtube.com:embed:cite]
:[]内にURLを書く.URLの後ろに”:embed:cite”と書く
結果は以下のようになります.
投稿した写真に後から説明を付け加えたい場合
はてなブログの編集サイドバー機能のうち,”写真を投稿”で写真をブログに埋め込むことが可能です.しかし,ただ写真を埋め込んだ場合は編集記事内では[f:id:~~~~j:plain]
と表示されているはず.
この場合に,後から図のタイトルといった説明を付け加えたくなったらどうすればよいでしょうか?その方法は,以下のように[f:id:~~~~j:plain]
を<figure>
タグで囲めばよいということです.
そして,以下の”タイトル”に図の説明等のテキストを入力すればOKです.注意として~~~~は各々で変わります.
<figure class="figure-image figure-image-fotolife" title="タイトル">[f:id:~~~~j:plain]<figcaption>タイトル</figcaption></figure>