2
Help us understand the problem. What are the problem?

posted at

updated at

Qiitaにyoutube動画を埋め込む方法(2021/3/11のQiitaのアップデートで埋め込めるようになりました)

Qiitaにyoutubeを埋め込む方法

※追記

2021/3/11のQiitaのアップデートでyoutubeの埋め込みができるようになったので、埋め込み手順を追記しておきます。

(参考)Qiita公式 リリースノート

埋め込み手順

1. 埋め込みたい動画の右下にある「共有」をクリック

image.png

2. 「埋め込む」をクリック

image.png

3. 表示されたソースコードをコピー

image.png

開始位置にチェックを入れると、時間を編集できるようになります。ここで開始時間を指定すれば、埋め込んだ動画がその時間から始まるようになります。

<iframe width="560" height="315" src="https://www.youtube.com/embed/aPvYI-nczXM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

4. youtubeの埋め込みでとってきたURLをQiitaにコピペ

以上で埋め込み完了です。

5.(補足)埋め込み用のURLが分かっている場合

共有用のリンクがわかっている場合は以下のコードのSRC属性にURLを記載すれば埋め込みできます。

<iframe width="560" height="315" src="URL" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>



以上



結論から言うと、youtubeの埋め込みはできない。

代替はテキストリンク。

youtubeへのリンク貼り方

設置例
NBAジノビリのプレー集

[アンカーテキスト](URL)

ソースコード
[NBAジノビリのプレー集](https://youtu.be/Hlm6mkgGio4)

※youtubeのリンクはアクセスしているページのURLではなく、共有用のURL

image.png image.png


iframeによる埋め込み(※使えない)

↓↓↓ここにiframeタグ貼り付けてる

↑↑↑ここまで

↓↓↓↓↓↓↓ あなたの記事の内容
html
:ソースコード
───────
html:ソースコード
↑↑↑↑↑↑↑ 編集リクエストの内容

```

iframeは表示されない


画像形式の埋め込み(※使えない)

NBAジノビリのプレー集 :not foundになる

ソースコード
![NBAジノビリのプレー集](https://youtu.be/Hlm6mkgGio4) 

まとめ

おとなしくテキストリンクで設置

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
2
Help us understand the problem. What are the problem?