デモ
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
↧