video gallery

index.html

<div class="block">
    <div class="film-container">
        <div class="row">
            <!-- single Film 1 start -->
            <div class="single-film wow fadeInDown" data-wow-delay=".1s">
                <div class="box" style="background: url(https://upload.wikimedia.org/wikipedia/commons/7/70/Big.Buck.Bunny.-.Opening.Screen.png);">
                    <div class="box__right box-pay-icon">
                        <a href="javascript:;">
                            <i class="play-movie-icon ion-ios-play-outline"></i>
                        </a>
                    </div>
                    <div class="box__left box-pay-icon">
                        <a href="javascript:;">
                            <i class="play-movie-icon ion-ios-play-outline"></i>
                        </a>
                    </div>
                    <div class="box__top box-pay-icon">
                        <a href="javascript:;">
                            <i class="play-movie-icon ion-ios-play-outline"></i>
                        </a>
                    </div>
                    <div class="box__bottom box-pay-icon">
                        <a href="javascript:;">
                            <i class="play-movie-icon ion-ios-play-outline"></i>
                        </a>
                    </div>
                    <div class="play-video">
                        <video width="320" height="240" controls id="PlayVideo1">
                            <source src="https://www.rmp-streaming.com/media/bbb-360p.mp4" type="video/mp4">

                        </video>
                    </div>
                    <i class="video-tag-close ion-ios-close-outline" onclick="pauseVid1()"></i>
                </div>
                <div class="film-information">
                    <p>Big Buck Bunny</p>
                    <p>Video Gallery 1</p>
                </div>
            </div>
            <!-- single Film 1 end -->
            <!-- single Film 2 start -->
            <div class="single-film wow fadeInDown" data-wow-delay=".2s">
                <div class="box" style="background: url(https://upload.wikimedia.org/wikipedia/commons/7/70/Big.Buck.Bunny.-.Opening.Screen.png);">
                    <div class="box__right box-pay-icon">
                        <a href="javascript:;">
                            <i class="play-movie-icon ion-ios-play-outline"></i>
                        </a>
                    </div>
                    <div class="box__left box-pay-icon">
                        <a href="javascript:;">
                            <i class="play-movie-icon ion-ios-play-outline"></i>
                        </a>
                    </div>
                    <div class="box__top box-pay-icon">
                        <a href="javascript:;">
                            <i class="play-movie-icon ion-ios-play-outline"></i>
                        </a>
                    </div>
                    <div class="box__bottom box-pay-icon">
                        <a href="javascript:;">
                            <i class="play-movie-icon ion-ios-play-outline"></i>
                        </a>
                    </div>
                    <div class="play-video">
                        <video width="320" height="240" controls id="PlayVideo2">
                            <source src="https://www.rmp-streaming.com/media/bbb-360p.mp4" type="video/mp4">
                        </video>
                    </div>
                    <i class="video-tag-close ion-ios-close-outline" onclick="pauseVid2()"></i>
                </div>
                <div class="film-information">
                    <p>Big Buck Bunny</p>
                    <p>Video Gallery 2</p>
                </div>
            </div>
            <!-- single Film 2 end -->
            <!-- single Film 3 start -->
            <div class="single-film wow fadeInDown" data-wow-delay=".3s">
                <div class="box" style="background: url(https://upload.wikimedia.org/wikipedia/commons/7/70/Big.Buck.Bunny.-.Opening.Screen.png);">
                    <div class="box__right box-pay-icon">
                        <a href="javascript:;">
                            <i class="play-movie-icon ion-ios-play-outline"></i>
                        </a>
                    </div>
                    <div class="box__left box-pay-icon">
                        <a href="javascript:;">
                            <i class="play-movie-icon ion-ios-play-outline"></i>
                        </a>
                    </div>
                    <div class="box__top box-pay-icon">
                        <a href="javascript:;">
                            <i class="play-movie-icon ion-ios-play-outline"></i>
                        </a>
                    </div>
                    <div class="box__bottom box-pay-icon">
                        <a href="javascript:;">
                            <i class="play-movie-icon ion-ios-play-outline"></i>
                        </a>
                    </div>
                    <div class="play-video">
                        <video width="320" height="240" controls id="PlayVideo3">
                            <source src="https://www.rmp-streaming.com/media/bbb-360p.mp4" type="video/mp4">
                        </video>
                        <i class="video-tag-close ion-ios-close-outline" onclick="pauseVid3()"></i>
                    </div>
                </div>
                <div class="film-information">
                    <p>Big Buck Bunny</p>
                    <p>Video Gallery 3</p>
                </div>
            </div>
            <!-- single Film 3 end -->
            <!-- </div> -->
            <!-- <div class="row"> -->
            <!-- single Film 4 start -->
            <div class="single-film wow fadeInDown" data-wow-delay=".4s">
                <div class="box" style="background: url(https://upload.wikimedia.org/wikipedia/commons/7/70/Big.Buck.Bunny.-.Opening.Screen.png);">
                    <div class="box__right box-pay-icon">
                        <a href="javascript:;">
                            <i class="play-movie-icon ion-ios-play-outline"></i>
                        </a>
                    </div>
                    <div class="box__left box-pay-icon">
                        <a href="javascript:;">
                            <i class="play-movie-icon ion-ios-play-outline"></i>
                        </a>
                    </div>
                    <div class="box__top box-pay-icon">
                        <a href="javascript:;">
                            <i class="play-movie-icon ion-ios-play-outline"></i>
                        </a>
                    </div>
                    <div class="box__bottom box-pay-icon">
                        <a href="javascript:;">
                            <i class="play-movie-icon ion-ios-play-outline"></i>
                        </a>
                    </div>
                    <div class="play-video">
                        <video width="320" height="240" controls id="PlayVideo4">
                            <source src="https://www.rmp-streaming.com/media/bbb-360p.mp4" type="video/mp4">
                        </video>
                        <i class="video-tag-close ion-ios-close-outline" onclick="pauseVid4()"></i>
                    </div>
                </div>
                <div class="film-information">
                    <p>Big Buck Bunny</p>
                    <p>Video Gallery 4</p>
                </div>
            </div>
            <!-- single Film 4 end -->
            <!-- single Film 5 start -->
            <div class="single-film wow fadeInDown" data-wow-delay=".5s">
                <div class="box" style="background: url(https://upload.wikimedia.org/wikipedia/commons/7/70/Big.Buck.Bunny.-.Opening.Screen.png);">
                    <div class="box__right box-pay-icon">
                        <a href="javascript:;">
                            <i class="play-movie-icon ion-ios-play-outline"></i>
                        </a>
                    </div>
                    <div class="box__left box-pay-icon">
                        <a href="javascript:;">
                            <i class="play-movie-icon ion-ios-play-outline"></i>
                        </a>
                    </div>
                    <div class="box__top box-pay-icon">
                        <a href="javascript:;">
                            <i class="play-movie-icon ion-ios-play-outline"></i>
                        </a>
                    </div>
                    <div class="box__bottom box-pay-icon">
                        <a href="javascript:;">
                            <i class="play-movie-icon ion-ios-play-outline"></i>
                        </a>
                    </div>
                    <div class="play-video">
                        <video width="320" height="240" controls id="PlayVideo5">
                            <source src="https://www.rmp-streaming.com/media/bbb-360p.mp4" type="video/mp4">
                        </video>
                        <i class="video-tag-close ion-ios-close-outline" onclick="pauseVid5()"></i>
                    </div>
                </div>
                <div class="film-information">
                    <p>Big Buck Bunny</p>
                    <p>Video Gallery 5</p>
                </div>
            </div>
            <!-- single Film 5 end -->
            <!-- single Film 6 start -->
            <div class="single-film wow fadeInDown" data-wow-delay=".6s">
                <div class="box" style="background: url(https://upload.wikimedia.org/wikipedia/commons/7/70/Big.Buck.Bunny.-.Opening.Screen.png);">
                    <div class="box__right box-pay-icon">
                        <a href="javascript:;">
                            <i class="play-movie-icon ion-ios-play-outline"></i>
                        </a>
                    </div>
                    <div class="box__left box-pay-icon">
                        <a href="javascript:;">
                            <i class="play-movie-icon ion-ios-play-outline"></i>
                        </a>
                    </div>
                    <div class="box__top box-pay-icon">
                        <a href="javascript:;">
                            <i class="play-movie-icon ion-ios-play-outline"></i>
                        </a>
                    </div>
                    <div class="box__bottom box-pay-icon">
                        <a href="javascript:;">
                            <i class="play-movie-icon ion-ios-play-outline"></i>
                        </a>
                    </div>
                    <div class="play-video">
                        <video width="320" height="240" controls id="PlayVideo6">
                            <source src="https://www.rmp-streaming.com/media/bbb-360p.mp4" type="video/mp4">
                        </video>
                        <i class="video-tag-close ion-ios-close-outline" onclick="pauseVid6()"></i>
                    </div>
                </div>
                <div class="film-information">
                    <p>Big Buck Bunny</p>
                    <p>Video Gallery 6</p>
                </div>
            </div>
            <!-- single Film 6 end -->
        </div>
    </div>
</div>

script.js

$(document).ready(function() {
 $(".single-film .play-movie-icon").click(function() {
  var _this = this;
   setTimeout(function() {
      $(_this).parents(".single-film").addClass("single-film-in");
     }, 700);
     $(".single-film").addClass("single-film-animate");
     $(this).parents(".single-film").addClass("single-film-active");
    });
   
 $(".single-film .video-tag-close").click(function() {
  var _this = this;
  setTimeout(function() {
    $(_this).parents(".single-film").removeClass("single-film-active");
   }, 1500);
   setTimeout(function() {
      $(".single-film").removeClass("single-film-animate");
   }, 800);
    $(_this).parents(".single-film").removeClass("single-film-in");
     });
    });

var vid1 = document.getElementById("PlayVideo1");

function pauseVid1() {
    vid1.pause();
};
var vid2 = document.getElementById("PlayVideo2");

function pauseVid2() {
    vid2.pause();
};
var vid3 = document.getElementById("PlayVideo3");

function pauseVid3() {
   vid3.pause();
};
var vid4 = document.getElementById("PlayVideo4");

function pauseVid4() {
   vid4.pause();
};
var vid5 = document.getElementById("PlayVideo5");

function pauseVid5() {
  vid5.pause();
};
var vid6 = document.getElementById("PlayVideo6");

function pauseVid6() {
   vid6.pause();
};

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

style.scss

@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700');

$body-bg:#0c101b;
$white: #fff;
$film-bg: rgba(0,
0,
0,
0.43);



$top: 0%,
0%,
0%,
55%,
55%,
55%;
$left: 0%,
33%,
66%,
0%,
33%,
66%;
$i: 1;
$base-font-size: 14px;
* {
    box-sizing: border-box;
}

body {
    background: $body-bg;
    font-family: 'Montserrat', sans-serif;
}

@mixin width-float {
    width: 100%;
    float: left;
}

@mixin bg-img-property {
    background-position: center center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
}

.block {
    width: 840px;
    margin: 10% auto;
    overflow: hidden;
}

.box {

    position: relative;
    height: 130px;
    line-height: 150px;
    overflow: hidden;
    @include bg-img-property;
}

%box__dir {
    position: absolute;
    width: inherit;
    height: inherit;

    text-align: center;
    line-height: inherit;

    transition: transform .4s ease;

    &:before {
        position: absolute;

        content: '';

        width: 100%;
        height: 100%;
        transform: rotate(45deg);
    }

    &:hover {
        transform: translateX(0);
        z-index: 1;
    }

    &:hover:before {
        width: 100%;
        height: 100%;
        transform: none;
    }
}

.box__right {
    @extend %box__dir;
    background: $film-bg;
    transform: translateX(100%);

    &:before {
        right: 100%;
        bottom: 0;
        transform-origin: 100% 100%;
    }

    &:hover~.box__center {
        transform: translateX(-100%);
    }
}

.box__left {
    @extend %box__dir;
    background: $film-bg;
    transform: translateX(-100%);

    &:before {
        left: 100%;
        transform-origin: 0 0;
    }

    &:hover~.box__center {
        transform: translateX(100%);
    }
}

.box__top {
    @extend %box__dir;
    background: $film-bg;
    transform: translateY(-100%);

    &:before {
        top: 100%;
        right: 0;
        transform-origin: 100% 0;
    }

    &:hover~.box__center {
        transform: translateY(100%);
    }
}


.box__bottom {
    @extend %box__dir;
    background: $film-bg;
    transform: translateY(100%);

    &:before {
        bottom: 100%;
        left: 0;
        transform-origin: 0 100%;
    }

    &:hover~.box__center {
        transform: translateY(-100%);
    }
}


.film-container {
    @include width-float;
    position: relative;
    .row {
        height: 445px;
        position: relative;
        .single-film {
            width: 280px;
            height: auto;
            float: left;
            padding: 0px 15px;
            position: absolute;
            z-index: 4;
            background: $body-bg;
            @for $i from 1 through 6 {
                &:nth-child(#{$i}) {
                    top: nth($top, $i);
                    left: nth($left, $i);
                    transition: all ease .8s;
                }
            }
            .play-video {
                transition: all ease .8s;
                opacity: 0;
                background: $body-bg;
                video {
                    width: 100%;
                    height: 100%;
                    transition: all ease .8s;
                }
            }
            .box-pay-icon {
                display: block;
                opacity: 1;
                z-index: 9;
            }
            .video-tag-close {
                    transition: all ease .5s;
                    position: absolute;
                    top: 0px;
                    right: 9px;
                    font-size: 28px;
                    color: $white;
                    cursor: pointer;
                    opacity: 0;
                    background: $body-bg;
                    width: 35px;
                    height: 35px;
                    text-align: center;
                    line-height: 36px;
            }
            .box {
                width: 100%;
                transition: all ease .8s;
                .play-movie-icon {
                    color: $white;
                    font-size: 45px;
                    line-height: 0;
                    font-weight: bold;
                }
            }
            .film-information {
                @include width-float;
                margin-top: 6%;
                transition: all ease .8s;
                p {
                    @include width-float;
                    color: $white;
                    font-size: 13px;
                    margin: 0;
                    line-height: $base-font-size + 3;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    overflow: hidden;
                }
            }
        }
        .single-film.single-film-animate {
            left: 33% !important;
            top: 33% !important;
            transition: all ease .8s;
            bottom: 33%;
            right: 33%;
            transition: all ease .8s;
            .film-information {
                opacity: 0;
                transition: all ease .8s;
            }
            .box-pay-icon {
                transition: all ease .8s;
                display: none !important;
            }
        }

        .single-film.single-film-active {
            z-index: 6;
        }
        .single-film.video-min {
            transition: all ease .8s;
            display: block;
            opacity: 1;
            video {
                margin: 0 auto !important;
                height: 0% !important;
                width: 0% !important;
                margin-left: 40% !important;
                margin-top: 20% !important;
                overflow: hidden !important;
            }
        }
        .single-film.single-film-in {
            z-index: 6;
            transition: all ease .8s;
            right: 0 !important;
            left: 0 !important;
            top: 0 !important;
            bottom: 0 !important;
            height: auto !important;
            width: 100% !important;
            .box {
                height: 100% !important;
                transition: all ease .8s;
                width: 100% !important;
                overflow: visible;
            }
            .play-video {
                transition: all ease .8s;
                position: absolute;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                margin: 0 auto;
                text-align: center;

                opacity: 1 !important;
                video {
                    transition: all ease .8s;
                    width: 100%;
                    height: 100%;
                }
            }
            &:hover {
                .video-tag-close {
                    transition: all ease .8s;
                    opacity: 1;
                }
            }
        }
    }
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" />

video-gallery.markdown

video gallery

A Pen by Gnanavel Venkatesan. on CodePen.

License.