Video
---
Example # aspect ratio
Video
Youtube Video
HTML
<div class="bs-media-wrapper">
<h3>Video</h3>
<div class="bs-media">
<video playsinline="" controls="true">
<source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4" type="video/mp4" />
</video>
</div>
</div>
Default aspect ration is 16:9
For aspect ration 4:3 - Add class "aspect-4-3" in
<div class="bs-media">
For aspect ration 1:1 - Add class "aspect-1-1" in
<div class="bs-media">
<div class="bs-media aspect-4-3"> <div class="bs-media aspect-1-1">
This may also be used for <iframe>
and <img>; it is not limited to
<video> only.
Example # Autoplay inview
This feature is preferred for muted video.
This may only be used for <video> elements.
Add attribute data-behavior-is="autoplay-video" in
<video playsinline="" controls="" muted="">
<video data-behavior-is="autoplay-video" playsinline="" controls="" muted="" />
Example # Popup
HTML
<button class="open-modal-btn" data-behavior-is="modal-btn" data-modal-id="videoPopup">Video Modal</button>
<div class="bs-modal-overlay">
<div class="bs-modal-wrapper bs-modal-wrapper--video" id="videoPopup" data-has-video="true">
<button class="close-modal-btn"></button>
<div class="bs-media-wrapper">
<div class="bs-media">
<video playsinline="" controls="">
<source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4" type="video/mp4" />
</video>
</div>
</div>
</div>
</div>
This example is using the Modal component. For more detail please click here.
Attribute data-has-video "true" is using for stop video when we close the modal.
Here you can also use above aspect ratio classes.
<div class="bs-media aspect-4-3">