<!-- Button trigger modal -->
<button type="button" class="btn btn-default btn-raised" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>

<!-- Modal -->
<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog animated zoomIn animated-3x" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title color-primary" id="myModalLabel">Modal title</h3>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true"><i class="zmdi zmdi-close"></i></span></button>
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                <button type="button" class="btn  btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

<!-- Button trigger modal -->
<button type="button" class="btn btn-default btn-raised" data-toggle="modal" data-target="#myModal2">
Launch Large modal
</button>

<!-- Modal -->
<div class="modal" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2">
    <div class="modal-dialog modal-lg animated zoomIn animated-3x" role="document">
        ...
    </div>
</div>

<!-- Button trigger modal -->
<button type="button" class="btn btn-default btn-raised" data-toggle="modal" data-target="#myModal3">
Launch Small modal
</button>

<!-- Modal -->
<div class="modal" id="myModal3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel3">
    <div class="modal-dialog modal-sm animated zoomIn animated-3x" role="document">
        ...
    </div>
</div>

<!-- Modal -->
<div class="modal modal-warning" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog animated zoomIn animated-3x" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title color-primary" id="myModalLabel">Modal title</h3>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true"><i class="zmdi zmdi-close"></i></span></button>
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                <button type="button" class="btn  btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

<button type="button" class="btn btn-default btn-raised" data-toggle="modal" data-target="#myModal11">
Only Video
</button>

<div class="modal" id="myModal11" tabindex="-1" role="dialog" aria-labelledby="myModalLabel11">
    <div class="modal-dialog animated zoomIn animated-3x" role="document">
        <div class="modal-content">
            <div class="js-player" data-type="vimeo" data-plyr-embed-id="94747106"></div>
        </div>
    </div>
</div>