RYO.dev

最終更新日:

Webページに動画を埋め込む依頼を引き受けた話

  1. 依頼内容
  2. 役務内容
  3. 料金と納期、その他
  4. まとめ
  5. フィードバック

依頼内容

動作作成サービスRICHKAで作った動画をWebページに表示させる方法を教えてほしいという依頼でした。動画はループ再生をさせ、かつ、レスポンシブ対応もさせたいとのことでした。

役務内容

RICHKAの動画をWebページに表示させる方法は2つあります。

  1. 動画をダウンロードしてサーバーにアップロードし、video要素で表示させる
  2. RICHKA内で作れる埋め込みタグで表示させる

この2通りの方法を説明し、質問をされたらそれに答えました。以下では上の2つの方法を説明します。

video要素を使う方法

  1. 制作した動画をダウンロードします。ダウンロード方法はこちら。そしてサーバーにアップロードします。
  2. HTMLは次のようにコードを書きます。

    <video src="img/sample.mp4" loop controls class="sampleVideo"></video>

    属性の意味については<video>:動画埋め込み要素 - HTML: HyperText Markup Language | MDNを参考にしてください。ちなみに、ループ再生をさせる場合はautoplay属性だけでなく、muted属性も必要です。

    loop属性やcontrols属性はboolean attributeと呼ばれる種類の属性です(ソース)。trueであれば属性を適用させ、falseであれば適用させません。boolean attributeはその属性があればtrue、なければfalseと解釈されるため、="~"を書く必要はありません(ソース)。

  3. レスポンシブ対応させるために、以下のCSSを指定します。

    .sampleVideo {
      display: block;
      margin: 0 auto;
      max-width: 480px;
      width: 100%;
    }
  4. こちらがサンプルです(この動画はRICHKAで作った動画ではありません)。

埋め込みタグを使う方法

  1. 埋め込みタグを作ります。埋め込みタグの作り方はこちら
  2. 動画を表示させたい場所にdiv要素を作り、その中に埋め込みタグを貼り付けます。埋め込みタグはiframe要素になっているはずです。

    <div class="sampleIframe-C">
      <!-- 埋め込みタグをコピペ -->
      <iframeclass="sampleIframe"><iframe>
    </div>
  3. レスポンシブ対応させるために、以下のCSSを指定します。

    .sampleIframe-C {
      margin: 0 auto;
      max-width: 480px;
      position: relative;
    }
    .sampleIframe-C::after {
      content: "";
      display: block;
      padding-top: calc(100% * 315 / 560);
    }
    .sampleIframe {
      height: 100%;
      position: absolute;
      width: 100%;
    }

    こちらがサンプルです。この動画はRICHKAで作った動画ではなくYouTubeの動画です。YouTubeも埋め込みタグがiframe要素なので代替として使います。

    アスペクト比を固定させたまま画面幅に応じて拡大縮小させたいときによく使うコードです。上のコードの場合、画面幅がどうであれ、iframe要素の幅:高さは常に560:315になります。このコードの仕組みを抽象的に表すと、.sampleIframe-Ciframe要素と同じアスペクト比の入れ物を作り、その中にiframe要素をぴったりはめるイメージです。

    この仕組みを実現するために重要なコードがpadding-topプロパティです。padding-topの値を%で書くとその大きさは、親要素の幅に対する割合として解釈されます.sampleIframe-C::after.sampleIframe-Cの子要素として扱われるので、.sampleIframe-C::afterpadding-topを%表記で指定すると、.sampleIframe-Cの幅の割合分の大きさになります。

    あとはiframe要素のアスペクト比を元にpadding-topプロパティに適切な値を指定するとアスペクト比が固定されたままとなり、レイアウトを崩すことなくきれいにレスポンシブ対応できるというわけです。

  4. 実はもう少し簡単なコードでレスポンシブ化することもできます。まず、HTMLは埋め込みタグだけで大丈夫です。

    <iframeclass="sampleIframe2"><iframe>

    次に、以下のCSSを指定します。先ほどよりかは少しコンパクトになりました。

    .sampleIframe2 {
      display: block;
      height: calc(80vw * 315 / 560);
      margin: 0 auto;
      max-height: 270px;
      max-width: 480px;
      width: 80vw;
    }

    こちらがサンプルです。

    このコードのポイントはwidthheightvwを使っていることでしょう。vwでなくてもvhでもvmaxでもvminでもいいですが、とりあえず単位を合わせることが重要です。

料金と納期、その他

まとめ

ネコかわいいよね。飼いたいよね。

フィードバック

ご意見やお聞きしたいことがございましたら、TwitterのDMメールにご連絡ください。