Media Player

xPider 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

Youtube Player


                                    <a class="lightbox media-player-icon media-player-icon--md media-player-icon--fill-coral" data-autoplay="true" data-vbtype="video" href="https://www.youtube.com/watch?v=aRh_eUQSmIg">
                                    <i class="icon icon-triangle-right-17"></i>
                                </a>
                                

Vimeo Player


                                        <a class="lightbox media-player-icon media-player-icon--lg media-player-icon--fill-coral btn-splash-hover z-index1" data-autoplay="true" data-vbtype="video" href="https://vimeo.com/75976293">
                                        <i class="icon icon-triangle-right-17"></i>
                                    </a>
                                

Player Outline Icons


                                        <a class="lightbox media-player-icon media-player-icon--xs media-player-icon--outline-white" data-autoplay="true" data-vbtype="video" href="https://vimeo.com/75976293">
                                        <i class="icon icon-triangle-right-17"></i>
                                    </a>

                                        <a class="lightbox media-player-icon media-player-icon--sm media-player-icon--outline-white" data-autoplay="true" data-vbtype="video" href="https://vimeo.com/75976293">
                                        <i class="icon icon-triangle-right-17"></i>
                                    </a>

                                    <a class="lightbox media-player-icon media-player-icon--md media-player-icon--outline-white" data-autoplay="true" data-vbtype="video" href="https://vimeo.com/75976293">
                                        <i class="icon icon-triangle-right-17"></i>
                                    </a>

                                    <a class="lightbox media-player-icon media-player-icon--lg media-player-icon--outline-white" data-autoplay="true" data-vbtype="video" href="https://vimeo.com/75976293">
                                        <i class="icon icon-triangle-right-17"></i>
                                    </a>
    
                                

Player Fill Icons


                                        <a class="lightbox media-player-icon media-player-icon--xs media-player-icon--fill-primary" data-autoplay="true" data-vbtype="video" href="https://vimeo.com/75976293">
                                        <i class="icon icon-triangle-right-17"></i>
                                    </a>

                                    <a class="lightbox media-player-icon media-player-icon--sm media-player-icon--fill-primary" data-autoplay="true" data-vbtype="video" href="https://vimeo.com/75976293">
                                        <i class="icon icon-triangle-right-17"></i>
                                    </a>

                                    <a class="lightbox media-player-icon media-player-icon--md media-player-icon--fill-primary" data-autoplay="true" data-vbtype="video" href="https://vimeo.com/75976293">
                                        <i class="icon icon-triangle-right-17"></i>
                                    </a>

                                    <a class="lightbox media-player-icon media-player-icon--lg media-player-icon--fill-primary" data-autoplay="true" data-vbtype="video" href="https://vimeo.com/75976293">
                                        <i class="icon icon-triangle-right-17"></i>
                                    </a>

                                    <a class="lightbox media-player-icon media-player-icon--lg media-player-icon--fill-coral" data-autoplay="true" data-vbtype="video" href="https://vimeo.com/75976293">
                                        <i class="icon icon-triangle-right-17"></i>
                                    </a>

                                    <a class="lightbox media-player-icon media-player-icon--lg media-player-icon--fill-grey" data-autoplay="true" data-vbtype="video" href="https://vimeo.com/75976293">
                                        <i class="icon icon-triangle-right-17"></i>
                                    </a>
    
                                

Combining icon and button


                                <a class="btn btn--outline-thick btn--sm rounded-full lightbox position-relative btn-3d-hover btn-splash-hover vbox-item" data-autoplay="true" data-vbtype="video" href="https://www.youtube.com/watch?v=aRh_eUQSmIg">
                                    <span class="pos-horizon-center media-player-icon media-player-icon--sm media-player-icon--fill-grey">
                                        <i class="icon icon-triangle-right-17"></i>
                                    </span>
                                    <span class="ml-30">Watch the video</span>
                                </a>

                                <a class="lightbox vbox-item" data-autoplay="true" data-vbtype="video" href="https://vimeo.com/75976293">
                                    <span class="media-player-icon media-player-icon--sm media-player-icon--outline-white mr-10">
                                        <i class="icon icon-triangle-right-17"></i>
                                    </span>
                                    <span class="btn__text color-white">Watch our video</span>
                                </a>

                                
Class Reference

.media-player-icon--lg
.media-player-icon--md
.media-player-icon--sm
.media-player-icon--xs
.media-player-icon--fill-primary
.media-player-icon--fill-grey
.media-player-icon--fill-coral
.media-player-icon--outline-white