Lorem ipsum dolor sit amet consectetur adipiscing elitsed do eiusmod tempor incididunt utlabore et dolore magna aliqua. Utenim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet consectetur adipiscing elitsed do eiusmod tempor incididunt utlabore et dolore magna aliqua. Utenim ad minim veniam quis nostrud exercitation ullamco laboris.
Usage
<section class="section-video">
<video autoplay loop muted playsinline poster="image.jpg">
<source src="video.mp4" type="video/mp4">
</video>
<div class="container">
</div>
</section>
Settings
| Name | Type | Description |
|---|---|---|
| Video file | Information |
You need to upload your MP4 video on your server and use it. The video must be compatible with the HTML5 format.
You can use the free software Any video converter
to convert your videos. Remember to set the poster image of the video with the attribute poster="image.jpg", it's showed while the video is loading or if the video play is not possible,
usually on mobile devices.
|
| Full screen | CSS |
Add the class full-screen to the section to set the height of the section to full screen.
Use the attribute data-offset="123" to adjust the header height.
Try it
Full screen
|
| Full width | CSS |
Add the class section-full-width to make the section full width.Add the class section-full-width-left to make the section full width only on left.Add the class section-full-width-right to make the section full width only on right.Full width right and left sections require two col-lg-6 as main content.
Try it
Full width
|
| Center alignment | CSS |
Add the class section-center to the section to vertically center the content inside it.
Try it
Align center
|
| No padding | CSS |
Add the class no-padding-y to remove the vertical padding, the class no-padding-x to remove the horizontal padding
and the class no-padding to remove both padding. Add the class no-padding-top or no-padding-bottom to remove only the top or bottom padding.
|
| Code location | Information |
The sections must be placed inside the <main> </main> code block.
For more details visit the getting started page.
|