Audio & Video

Videos

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

Vimeo

Youtube

<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

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

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

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

With Title

Card Title

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

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

Inside Cards


Card Title

Card Title


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

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

Responsive


<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