ホームページのヘッダー背景に、YouTubeの動画を設定する。

HTML5で動画を挿入する方法

HTML5では、タグが追加されており、容易に動画を設定できる。
けど、
ブラウザに合わせた形式の動画ファイルを用意しないといけないようだったので、
もう一つの方法YouTubeから設定する形式を取り入れた。
参考 : 動画を背景に設定する方法

◎ヘッダーの背景にする利点

1. 上から文字等を挿入できる
   つまり、背景とメインと別での設定ができる。ことだと、思います。

◎設定条件

・bootstrapを使う
・レスポンシブなサイトにする

HTML

◎YouTubeには「埋め込みコード」がある

なんかいろいろ設定したうえで、その設定のhtmlコードがとれる。

ここで取ってきたコードをそのまま、htmlファイルの任意の場所に追加すると動画が入れられる。　　
素敵ね～～☺
◎今回はヘッダーの背景に設定するので、以下は全部チェックを外した。

HTMLコード

tech.html

<div class="youtube_bg">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/hG20linALo8?rel=0&amp;controls=0&amp;showinfo=0&autoplay=1&loop=1&playlist=hG20linALo8" frameborder="0" allowfullscreen>
    </iframe>
</div>

CSS3

cssのほうで、実際にどのようにYouTubeの動画を表示させるかを設定する。
参考 : マージンと余白
参考 : CSS : positionの「absolute」「relative」「fixed」のリファレンス

cssは、
参考 : 動画を背景に設定する方法
こちらのものを元に変更していった。
以下で一つ一つのcssがなにを設定しているのかをみていく。
全体のcssコードは最後に。

• ヘッダーそのものの設定

techCreative.css

    .header_img{
        position: relative;
        overflow: hidden;
    }

　　

• 【padding】

techCreative2.css

    .youtube_bg{
        position: relative;
        padding: 0 0 50%;
        overflow: hidden;
    }

padding : 0 0 50%
paddingをこのように設定しないと、少なくとも私の挿入した動画では、きれいに横長表示になりませんでした。
解説読んでも理由わからなかったので後程調べます。
参考 : ボックスの余白と境界
　　

• 【hover ホバー】

techCreative3.css

    .youtube_bg:hover{
        margin-bottom: 0px;
    }

スマホ用(タッチスクリーン用の機能)
参考 : hover ホバー

• 【iflame】

techCreative4.css

    .youtube_bg iframe{
        position: absolute;
        width: 100%;
        height: 100%;
    }

レスポンシブなサイトにしているので、ブラウザ画面に対応した配置に設定をする。
ここをpxで設定すると、位置が固定になるので、設定位置によってはブラウザを小さくすると消えてしまう。
％で設定することで、ブラウザのサイズに合わせてサイズが変わる。
今回は背景全面に表示させたいので、
widthとheightを100%の設定にしている。
参考 : HTML　インラインフレーム
参考 : HTMLタグリファレンス

• 【@media Media Queries】
  デバイスのサイズに合わせて、上記で設定してきたことをどのように対応させるかという設定。
  リンク先がとてもわかりやすいです☺
  参考 : デバイスに合わせてCSSを振り分ける「Media Queries」
  参考 : Bootstrapでメディアクエリを書き加える時の指定方法について整理する

techCreative5.css

    @media screen and (max-width:600px){
        .youtube_bg{
            margin-top: 0;
            margin-bottom: 0;
        }
    }
     
    .header_img p{
        display: block;
        position: absolute;
        top: 25%;
        left: 10%;
        z-index: 200;
    }
     
    @media screen and (max-width:780px){
        .header_img p{
            display: block;
            position: absolute;
            top: 50%;
            left: 50%;
            width: 100%;
            text-align: center;
            -webkit-transform: translate(-50%,-50%);
            -ms-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
        }
    }

• ヘッダーに挿入するフォントの設定。
  今回は背景に動画を挿入している理由である、別枠でのヘッダーにおける設定。

techCreative6.css

    .top_header_catch{
        display: block;
        color: #fff;
        font-size: 100px;
        font-weight: bold;
        line-height: 1.4;
        text-shadow: 0 1px 2px rgba(0,0,0,.5);
    }

CSSコード全体

techCreative.css

.header_img{
    position: relative;
    overflow: hidden;
}

.youtube_bg{
    position: relative;
    padding: 0 0 50%;

}

.youtube_bg:hover{
    margin-bottom: 0px;
}

.youtube_bg iframe{
    position: absolute;
    width: 100%;
    height: 100%;
}

@media screen and (max-width:600px){
    .youtube_bg{
        margin-top: 0;
        margin-bottom: 0;
    }
}

.header_img p{
    display: block;
    position: absolute;
    top: 25%;
    left: 10%;
    z-index: 200;
}

@media screen and (max-width:780px){
    .header_img p{
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100%;
        text-align: center;
        -webkit-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
    }
}

.top_header_catch{
    display: block;
    color: #fff;
    font-size: 100px;
    font-weight: bold;
    line-height: 1.4;
    text-shadow: 0 1px 2px rgba(0,0,0,.5);
}