一緒に学ぶ！HP制作

今回メニューの実装に使うjQueryのプラグインは『FitVids.js』です。
当サイトのメニューの『jQueryについて』→『jQueryプラグイン一部紹介』にも掲載しています。

アクセスすると下の画像のように大きく『Download』とあるので左クリックしましょう。

クリックすると下の画像のような画面が出るので赤丸で囲っている部分『jquery.fitvids.js』を左クリックしましょう。

クリックすると下の画像のような画面が出るので赤丸で囲っている部分『Raw』を左クリックしましょう。

クリックすると下の画像のような画面が出るので右クリックをして『名前を付けて保存』を選んでください。
※1 保存名は『jquery.fitvids.js』のままで大丈夫です
※2 保存先は『jsフォルダ』内に保存してください

まず、『Page1.html』ファイルの「head」内に下記のコードを入力しましょう。


<script src="../js/jquery.fitvids.js"></script>

次に『Page1.js』ファイルに下記のコードを入力しましょう。


$(document).ready(function(){
$("#fitvids").fitVids();
});

次に『Page1.html』ファイルの「body」内に下記のコードを入力しましょう。今回は用意した動画（オリジナル動画.mp4）を使用していきます。
※1 動画ファイル名が書かれている部分に載せたいYouTubeのURLや自身の動画のURLを入力してください。
※2 コードが長いので途中改行しています。


<center>
<div id="fitvids">
 <iframe width="640"
  height="360"
  src="../Photo/オリジナル動画.mp4"
  frameborder="0"
  allowfullscreen>
 </iframe>
</div>
</center>


.fitvids {
position: relative;
margin: 20px 0;
padding-bottom: 56.25%;
padding-top: 30px;
overflow: hidden;
max-width: 100%;
height: auto;
}

.fitvids iframe, .fitvids object, .fitvids embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

サイトを作ってみよう

5.動画の埋め込み