[ショップサーブ]YouTubeの埋め込み（レスポンシブデザイン）

 

ショップサーブのヘルプにYouTubeのリンクが貼ってあるだけって。（泣）

 

ということで、以下設定したので備忘録。

 

使用レイアウト：レスポンシブ

 

「共有」→「埋め込み」→「動画の埋め込みソース」

 ↓こんな感じのソース　※赤いところは削除する。

<iframe width="560" height="315" src="https://www.youtube.com/embed/***********? controls=0" title="任意" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> 

で、これだけだと、レスポンシブにならないので、cssを使う。

.iframe-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;}

.iframe-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;} 

で、以下のように囲う。

<div class="iframe-wrapper">

<iframe src="https://www.youtube.com/embed/***********? controls=0" title="任意" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

</div>

 

ついでに、

自社のサイトに埋め込むのに、最後に他のチャンネルの関連動画がでてくるのはあまりよろしくないので、URLの最後に「?rel=0」を追加しておく。

このことで自分のチャンネルの動画が表示される。

 

<div class="iframe-wrapper">

<iframe src="https://www.youtube.com/embed/***********?rel=0 controls=0" title="任意" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

</div>

 

 

以上。