Bulma.cssでBrightcoveの動画をレスポンシブで埋め込む

デモ

See the Pen RwpGQoz by qwe001 (@qwe001) on CodePen.

やり方

レスポンシブ対応したい動画要素に「has-ratio」クラスを追加して、 figure.image.is-16by9 クラスで囲めばOKです。

Iframeの場合

<figure class="image is-16by9">
  <iframe src="https://www.youtube.com/embed/YE7VzlLtp-4"
    class="has-ratio"
    width="640"
    height="360"
    frameborder="0"
    allowfullscreen></iframe>
</figure>

Brightcove(video-js)の場合

<figure class="image is-16by9">
  <video-js id="myPlayerID"
    data-video-id="5165694790001"
    data-account="1752604059001"
    data-player="HJSEihoR"
    data-embed="default"
    data-application-id
    class="video-js has-ratio"
    controls></video-js>
  <script src="https://players.brightcove.net/1752604059001/HJSEihoR_default/index.min.js"></script>
</figure>

動画の画面サイズが16:9でなく、4:3なら figure.image.is-4by3 クラスで囲みます

<figure class="image is-4by3">
  <iframe class="has-ratio" width="640" height="480" src="https://www.youtube.com/embed/YE7VzlLtp-4" frameborder="0" allowfullscreen></iframe>
</figure>

参考サイト

https://bulma.io/documentation/elements/image/#arbitrary-ratios-with-any-element
https://bulmatemplates.github.io/bulma-templates/templates/modal-cards.html
https://player.support.brightcove.com/code-samples/brightcove-player-sample-display-related-link.html