動画をWebページに埋め込む方法

video By: Sean MacEntee

動画それだけで1つのページが作れる魅力的なコンテンツです。

Webサイトを作成する上で動画を扱えると作れるコンテンツの幅が広がりますので、知っておいて損は無い知識です。

今回は、YouTubeやニコニコ動画などの大手サイトの動画を自分のWebページに貼り付ける方法を紹介します。

動画をWebページに埋め込む方法
  1. YouTubeの動画の貼り付け方
  2. ニコニコ動画の貼り付け方
  3. fc2の動画の貼り付け方

YouTubeの動画の貼り付け方

貼り付けたい動画ページに行きます。
YouTube
そして、以下の手順でコードをコピーします。
YouTube2
後は動画を表示したいページにそのコードを貼り付けるだけです。
YouTube1

コードを貼り付けるとこのように、動画表示されます。

ニコニコ動画の貼り付け方

貼り付けたい動画ページに行き「動画情報を開く」をクリックします。
niconico1
「共有」をクリックして、コードを貼り付けます。
niconico2
  • 外部プレイヤー


  • 動画のサムネイルと詳細情報

外部プレイヤーのサイズを変更する

動画のサイズを変更したときは、URLの後ろに「?w=横幅&h=縦幅」を記述します。

HTML(変更前)
<script src="http://ext.nicovideo.jp/thumb_watch/sm1097445"></script>
<noscript><a href="http://www.nicovideo.jp/watch/sm1097445">【ニコニコ動画】【初音ミク】みくみくにしてあげる♪【してやんよ】</a></noscript>
HTML(変更後)
<script src="http://ext.nicovideo.jp/thumb_watch/sm1097445?w=横幅&h=縦幅"></script>
<noscript><a href="http://www.nicovideo.jp/watch/sm1097445">【ニコニコ動画】【初音ミク】みくみくにしてあげる♪【してやんよ】</a></noscript>

fc2の動画の貼り付け方

埋め込みを行い動画のページに行き、共有をクリックします。
fc2
サイズを選択して、コードをコピーし貼り付けます。
fc21
このように、動画が表示できます。
divider

Trackback URL

http://webnonotes.com/web/video/trackback/

No Comments Yet

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>