Museで手軽にWebサイト制作

Youtube動画を埋め込む

全334コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
MuseのWebサイト上に、ウィジェットを使用してYouTubeの動画を埋め込むための手順について解説します。
講師:
07:00

字幕

このレッスンでは YouTube 動画の 埋め込みについて解説します それでは 作っているサイトの Listen のページですね ここを開けて この中に YouTube の 動画を埋め込んでみましょう では 埋め込みなんですが ウィジェットを使います では「ウィジェットライブラリー」の中から その中の「ソーシャル」ですね 動画関連のものは「ソーシャル」 に入っています これをスクロールしていくと YouTube と Vimeo の ウィジェットが用意されています では この中から YouTube ですね これをドラッグアンドドロップで持ってきます するとですね 持ってきただけで このように 動画が一個 ネットに繋がっていれば 表示されます これなんですが Muse の方で 動作テスト用に用意されているですね 動画が埋め込まれています ではまずですね これ試しに どんな感じになるかちょっと見てみましょう 「プレビュー」に移動します そうすると このようにですね YouTube の再生窓がある 状態になっています ではこれですね 再生してみると このように再生することが できるようになってます では「デザイン」の方に戻って これをですね 自分で用意したビデオの方に 差し替えることになります ではまず 位置ですね 決めておきましょう ドラッグしていくと 中央に来るとですね この赤いラインが出ますので 中央に配置しておきます そして このメニューからも 一定の表示を作っておきます このですね ウインドウなんですが 今回はこのデフォルトの 表示のままで使えますが これですね 大きさをドラッグして 変えることができます では この動画のですね 内容の方を変更していきましょう オプションの項目を表示します この一番目の「ビデオ ID」というのが どのビデオを表示するかという ところなんですが これちょっと置いといて 下の方から見ていきましょう まず「テーマ」ですね こうしたインターフェースの部分 色を暗いものにするか 明るいものにするか そこらへんを選ぶことができます また「進捗カラー」というところですが 再生が進んでいくと このバーのところ 赤い表示で埋まっていきますが それを赤にするか 白にするか これを選ぶことができます そしてですね これ結構役に立つのが 「開始時間」というところですね 何もしてないと もちろんビデオの先頭から 再生されるんですが 例えば長いビデオで途中から見て欲しい 部分がある時なんかですね そうした時には開始時間 これ何秒後から 開始というのを設定しておくと 最初からですね その位置から スタートするように設定されて ビデオがアサインされます その下ですね 様々な細かい項目があります 「コントロールを表示」とありますが 何もしてないとですね このコントローラー これが表示されてますけど これをなしにて 例えばこの「自動再生」と組み合わせてですね ページにアクセスすると自動で ビデオの窓だけが再生されると そんな表示にすることもできます また 他の細かい「情報を表示」したりとか その再生をですね 終わったら 「ループ」させるなんてこともできます その他 「フルスクリーン」にすること このボタンですね これを動作させるかどうか こういったものとか あと「アノテーション」ですね 個別に YouTube 側で設定できる 字幕ですが それを表示するかしないか そして お店なんかやる場合には これ重要なんですが 「関連動画を表示」というの これ「オン」になっていると 再生が終わった時に 近いですね ジャンルの動画が 一覧で出てしまうんですが 例えば商品なんかだと 他の商品を見せたくないという時がありますね そういった時にはこれをオフにしておきます このように項目の設定を行います では この「ビデオ ID」の部分ですが これをですね YouTube の方から 取得しましょう ではブラウザーに移動します では 今 YouTube の方に アクセスしましたが これですね あらかじめ アルバムの プロモーションビデオですね それがアップロードされた状態になっています 今回はこのサンプルでやりますが 実際作るときはですね あらかじめ YouTube に アップロードしたビデオ それを使うことになります ちょっと再生してみると ♪ (癒し系の音楽) ♪ ♪ (癒し系の音楽) ♪ こんな内容ですね このビデオをそのまま埋め込みたいと思います そしたらビデオ ID ですが この部分です アドレスに出てる この最後の文字列ありますね watch?v= の後 この部分だけをコピーします では ドラッグして Mac の方は Command キー Windows の方は Ctrl キーを押しながら C を押します これでコピーされました では Muse に戻ります そしたらですね このオプションのところで 「ビデオ ID」のところに さっきのコピーしたものを貼り付けます Command もしくは Ctrl+V を押すと さっきのものが入りますね そしたらこのオプション閉じます そうすると再計算されて このようにですね さっきの YouTube 上にあった動画が 入って来ました もうこれだけです これで埋め込み完了ですね では「プレビュー」で見てみましょう そうするとこちらも差し代わってますね 再生すると ♪ (癒し系の音楽) ♪ ♪ (癒し系の音楽) ♪ このようにしっかりと サイト上に埋め込まれています ビデオの埋め込みというと 結構大変そうに感じるかもしれませんが 非常に簡単ですね しかもですね これ 再生しているのは YouTube から データが送られてますので 自分のですね ホームページのサーバーには 負荷が掛かってないと アクセスが結構いっぱい集まった場合にも 軽くですね 引っかかることなく ♪ (癒し系の音楽) ♪ ビデオが再生できるという そんなメリットもあります 動画の活用ですね これからのウェブの 運用には欠かせないものとなりますので 是非ともこのような埋め込みにも チャレンジしてください

Museで手軽にWebサイト制作

MuseはWebデザイナー以外でもスタイリッシュなWebサイトを作ることができる画期的なツールです。このコースでは架空のアーティストのニューアルバムのPRサイトを例に、サイトの構成や素材のレイアウト、動画や音声といったリッチメディアの埋め込み方、TwitterやFacebookなどのSNSとの連携、またモバイル機器への対応などを学ぶことができます。

1時間45分 (22 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2016年02月22日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。