スポンサーサイト

記事タイトル枠
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
このエントリーをはてなブックマークに追加
ページトップへ戻る

YouTube動画をサイトに埋め込む

記事タイトル枠

こんにちは!初心者のためのWEBデザイン教室、第22回目の授業です。

以前にグーグルマップをサイトに埋め込む方法を学びましたが、
今日はYouTube動画を埋め込んでみましょう。

YouTube動画をサイトに埋め込む

こちらもとっても簡単ですよ!

※ 2015/4/22 追記あり

INDEX

  1. YouTubeのサイトで、埋め込みたい動画のページを表示する
  2. 動画の下にある「共有」をクリック
  3. 「埋め込みコード」をクリック
  4. 動画のサイズを設定して、コードをコピー
  5. サイトのHTMLにコードをペースト

1.YouTubeのサイトで、埋め込みたい動画のページを表示する

まずはYouTube(http://www.youtube.com/)のサイトで、埋め込みたい動画のページを表示します。

YouTube動画をサイトに埋め込む

2.動画の下にある「共有」をクリック

YouTube動画をサイトに埋め込む

3.「埋め込みコード」をクリック

YouTube動画をサイトに埋め込む

4.動画のサイズを設定して、コードをコピー

コードが表示されたその下に、「動画のサイズ」のプルダウンがあります。

↑現在は、コード下の「もっと見る」をクリックすると、サイズなどオプションの設定ができます。(※2015/4/22追記)

既定のサイズを選択するか、またはサイトのデザインに合わせる場合は「カスタムサイズ」を選択。
そして横に現れるボックスにてサイズを指定します。

YouTube動画をサイトに埋め込む

そして、枠内のコードを全てコピーします。

5.サイトのHTMLにコードをペースト

コードをコピーしたら、DreamweaverなどでHTMLの編集画面に移動し、表示させたい場所にペーストします。
ここでは当ブログの記事内に貼り付けています。

130703_05.jpg

※<iframe>タグはインライン要素です。

これで終わりです!

とっても簡単でしたね!

それでは、お疲れ様でした!

関連記事
このエントリーをはてなブックマークに追加

テーマ : ホームページ・ブログ制作
ジャンル : コンピュータ

ページトップへ戻る

トラックバック


この記事にトラックバックする(FC2ブログユーザー)

YouTube動画をサイトに埋め込む-初心者のためのWEBデザイン教室

YouTube動画をサイトに埋め込む-初心者のためのWEBデザイン教室
ページトップへ戻る

コメントの投稿

非公開コメント

YOU TUBE

教えて下さい。
ホームページにyou tubeを貼り付けません。
いままでは貼り付けました。突然、埋めこみコードにあるメニューの「古い埋めこみコード」
がなくなっています。いままでこれにチエックを入れていました。なぜ、無くなったのでしょうか?

ただし共有で「Facebook」 や「ブログ」では貼り付け出来ます。


よろしくお願いいたします。

Re: YOU TUBE

こんにちは!
あまり情報がなかったのですが、他の方もこちら↓で質問されているように
https://productforums.google.com/forum/#!topic/youtube-ja/Uhov4AXMSBE
もしかしたら機能自体が停止されているのかもしれませんね。。

こちらにコメントを頂いた時点では、Youtubeのヘルプに以前の埋め込みコードについて記述があったものの、チェックボックス自体は無くなっていたので変だなと思ったのですが、今はヘルプからその記述も消えています。
ページトップへ戻る
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。