Media Player Button

vAPP uses venobox jquery plugin for media the player. Venobox offers a nice and elegant way to add zooming functionality for images, html content and multi-media on your webpages.

Open Venobox Docs

Player Button Options

Media Player Button

Combining icon and button text

See our 1 min video
Click to watch
See our 1 min video
Click to watch
Watch one min video 

                                            <!-- Transparent Media Player Button -->
                                            <a class="lightbox" data-autoplay="true" data-vbtype="video"
                                                href="https://www.youtube.com/watch?v=aRh_eUQSmIg">
                                                <span class="btn btn-media"><i class="icon icon-triangle-right"></i></span>
                                            </a>
    
                                            <!-- Media Player Button Circle -->
                                            <a class="lightbox" data-autoplay="true" data-vbtype="video"
                                                href="https://www.youtube.com/watch?v=aRh_eUQSmIg">
                                                <span class="btn btn-media btn-media-size--lg btn-bg--cta--3 rounded--full"><i class="icon icon-triangle-right"></i></span>
                                            </a>
    
                                            <!-- Media Player Button Semi-Rounded -->
                                            <a class="lightbox" data-autoplay="true" data-vbtype="video"
                                                href="https://www.youtube.com/watch?v=aRh_eUQSmIg">
                                                <span class="btn btn-media btn-media-size--md btn-bg--cta--3 rounded--08">
                                                    <i class="icon icon-triangle-right"></i>
                                                </span>
                                            </a>
    
                                            <!-- Media Player Button with Text -->
                                            <a class="btn btn-bg--primary lightbox reveal" data-autoplay="true"
                                                data-vbtype="video" href="https://www.youtube.com/watch?v=aRh_eUQSmIg">
                                                <span class="btn__text"><i class="icon icon-play-outline mr-1 font-size--30"></i>Click to Play</span>
                                            </a>
    
                                            <!-- Media Player Button Separated Text -->
                                            <a class="lightbox h6-font color--primary d-flex align-items-center justify-content-center"
                                                data-autoplay="true" data-vbtype="video"
                                                href="https://www.youtube.com/watch?v=aRh_eUQSmIg">
                                                <i class="icon icon-button-circle-play color--primary font-size--26"></i>
                                                <span class="ml-1 font-w--700">Button with Separated Text</span>
                                            </a>

Media Player Button Sizes


                                        <!-- Media Player Button Extra Small -->
                                        <a class="lightbox mx-1" data-autoplay="true" data-vbtype="video"
                                            href="https://www.youtube.com/watch?v=aRh_eUQSmIg">
                                            <span class="btn btn-media btn-media-size--xs btn-bg--primary rounded--full"><i class="icon icon-triangle-right"></i></span>
                                        </a>

                                        <!-- Media Player Button Small -->
                                        <a class="lightbox mx-1" data-autoplay="true" data-vbtype="video"
                                            href="https://www.youtube.com/watch?v=aRh_eUQSmIg">
                                            <span class="btn btn-media btn-media-size--sm btn-bg--cta--3 rounded--full"><i class="icon icon-triangle-right"></i></span>
                                        </a>

                                        <!-- Media Player Button Medium -->
                                        <a class="lightbox mx-1" data-autoplay="true" data-vbtype="video"
                                            href="https://www.youtube.com/watch?v=aRh_eUQSmIg">
                                            <span class="btn btn-media btn-media-size--md btn-bg--cta--4 rounded--full"><i class="icon icon-triangle-right"></i></span>
                                        </a>

                                        <!-- Media Player Button Large -->
                                        <a class="lightbox mx-1" data-autoplay="true" data-vbtype="video"
                                            href="https://www.youtube.com/watch?v=aRh_eUQSmIg">
                                            <span class="btn btn-media btn-media-size--lg btn-bg--cta--5 rounded--full"><i class="icon icon-triangle-right"></i></span>
                                        </a>

Media Player Button Color

vAPP Regular button color classes will work here perfectly. Please check the button page color options. Also check the class reference of this page to get the color classes.

Additional Class Reference

btn-media
btn-media-size--xl
btn-media-size--lg
btn-media-size--md
btn-media-size--sm
btn-bg--primary
btn-bg--white
btn-bg--orange
btn-bg--purple-light
btn-bg--green--300
btn-bg--cta--2
btn-bg--white--30
btn-bg--green--10