Media Player Button

SpaceMax 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

Transparent Media Player Button

Media Player Button

Media Player Button Semi-Rounded

Media Player Button with Text

Media Player Button Separated Text


                                            <!-- 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

SpaceMax 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--xs
btn-media-size--sm
btn-media-size--md
btn-media-size--lg
btn-bg--primary
btn-bg--primary--05
btn-bg--dark
btn-bg--darkblue
btn-bg--cta--1
btn-bg--cta--2
btn-bg--cta--3
btn-bg--cta--4
btn-bg--cta--5
btn-bg--white--10
btn-bg--white--15
btn-bg--white--20
btn-bg--white