Audio & Video

Videos

Post videos from vimeo, youtube or from your own host.

00:00
03:04

Vimeo

00:00
00:00

Youtube

00:00
04:18
<h3 class="text-center">Vimeo</h3>
<div class="card">
    <div class="js-player" data-plyr-provider="vimeo" data-plyr-embed-id="94747106"></div>
</div>

<h3 class="text-center">Youtube</h3>
<div class="card">
    <div class="js-player" data-plyr-provider="youtube" data-plyr-embed-id="9ZfN87gSjvI"></div>
</div>

Video Cards

Basic Card

00:00
03:04

Lorem ipsum dolor sit

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam sed labore autem nesciunt ea veniam recusandae necessitatibus reprehenderit.

Button Button

Whith Color

00:00
00:00

Lorem ipsum dolor sit

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam sed labore autem nesciunt ea veniam recusandae necessitatibus reprehenderit.

Button Button

Color Inverse

00:00
04:18

Lorem ipsum dolor sit

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam sed labore autem nesciunt ea veniam recusandae necessitatibus reprehenderit.

Button

Reverse Order

Lorem ipsum dolor sit

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam sed labore autem nesciunt ea veniam recusandae necessitatibus reprehenderit.

Button
00:00
03:04

With Title

Card Title

00:00
00:00

Lorem ipsum dolor sit

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam sed labore autem nesciunt ea veniam recusandae necessitatibus reprehenderit.

Button

With Title & Inverse Color

Card Title

00:00
03:04

Lorem ipsum dolor sit

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam sed labore autem nesciunt ea veniam recusandae necessitatibus reprehenderit.

Button
<div class="row">
    <div class="col-md-6">
        <h3 class="text-center">With Title</h3>
        <div class="card card-danger">
            <div class="card-header">
                <h3 class="card-title"><i class="zmdi zmdi-graduation-cap"></i> Card Title</h3>
            </div>
            <div class="js-player" data-plyr-provider="vimeo" data-plyr-embed-id="94747106"></div>
            <div class="card-body overflow-hidden text-center">
                <h4 class="color-danger">Lorem ipsum dolor sit</h4>
                ...
                <a href="javascript:void(0)" class="btn btn-danger btn-raised"><i class="zmdi zmdi-flower"></i> Button</a>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <h3 class="text-center">With Title & Inverse Color</h3>
        <div class="card card-info-inverse">
            <div class="card-header">
                <h3 class="card-title"><i class="zmdi zmdi-graduation-cap"></i> Card Title</h3>
            </div>
            <div class="js-player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY"></div>
            <div class="card-body overflow-hidden text-center">
                <h4 class="">Lorem ipsum dolor sit</h4>
                ...
                <a href="javascript:void(0)" class="btn btn-white color-info btn-raised"><i class="zmdi zmdi-flower"></i> Button</a>
            </div>
        </div>
    </div>
</div>

Audio

Play audio easily with the integrated plugin.

Basic

00:00
00:00

Inside Cards

00:00
00:00
00:00
00:00
00:00
00:00

Card Title

00:00
00:00

Card Title

00:00
00:00

Card Title

00:00
00:00

Lorem ipsum dolor sit

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam sed labore autem nesciunt ea veniam recusandae necessitatibus reprehenderit.

Download

Card Title

Lorem ipsum dolor sit

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam sed labore autem nesciunt ea veniam recusandae necessitatibus reprehenderit.

Download
00:00
00:00

Responsive

00:00
00:00
00:00
00:00

<h3>Basic</h3>
<audio class="js-player" controls>
    <source src="<%= assets %>/media/music.mp3" type="audio/mp3">
    <source src="<%= assets %>/media/music.ogg" type="audio/ogg">
</audio>

<h3>Inside Cards</h3>
<div class="card card-warning">
    <audio class="js-player" controls>
        <source src="<%= assets %>/media/music.mp3" type="audio/mp3">
        <source src="<%= assets %>/media/music.ogg" type="audio/ogg">
    </audio>
</div>

MaterialStyle

Social Links