/**
  * Plugin Name:  Click Image Play YouTube Video
  * Plugin URI:   https://github.com/sricharankrishnan/click-image-play-youtube-video
  * Description:  Click Image Play YouTube Video is a Jquery based plugin, designed to be integrated into your web app on the 
                  client side. It provides a simple yet effective user interface (in the form of an overlay), to help play 
                  youtube embeded videos based on a click event.
  * Requirements: Jquery version 3 upwards, CSS, Sass (only if you are using this in the pre compile phase)
  * Author:       Sricharan Krishnan | sricharan.krishnan@gmail.com
  * Author URI:   https://github.com/sricharankrishnan
  **/

/* This stylesheet is exclusively for the plugin. Incase you would like to make some changes, would recommend you import this in your stylesheet and then make the changes as per your liking. */
.videoPlayerOverlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1200;
    background-color: rgba(0, 0, 0, 0.5);
    transition-property: all;
    -moz-transition-property: all;
    -webkit-transition-property: all;
    -o-transition-property: all;
    -ms-transition-property: all;
    transition-duration: 0.25s;
    -webkit-transition-duration: 0.25s;
    -ms-transition-duration: 0.25s;
    -moz-transition-duration: 0.25s;
    -o-transition-duration: 0.25s;
    transition-timing-function: linear;
    -webkit-transition-timing-function: linear;
    -o-transition-timing-function: linear;
    -ms-transition-timing-function: linear;
    -moz-transition-timing-function: linear;
}
.videoPlayerOverlay .closeIcon {
    position: absolute;
    right: 15px;
    top: 15px;
    width: 3rem;
    z-index: 200;
    padding: 10px;
    border-radius: 50%;
    border: 0;
    background: #fff;
    width: 30px;
    height: 30px;
    transition-property: transform;
    -moz-transition-property: transform;
    -webkit-transition-property: transform;
    -o-transition-property: transform;
    -ms-transition-property: transform;
    transition-duration: 0.25s;
    -webkit-transition-duration: 0.25s;
    -ms-transition-duration: 0.25s;
    -moz-transition-duration: 0.25s;
    -o-transition-duration: 0.25s;
    transition-timing-function: ease-in-out;
    -webkit-transition-timing-function: ease-in-out;
    -o-transition-timing-function: ease-in-out;
    -ms-transition-timing-function: ease-in-out;
    -moz-transition-timing-function: ease-in-out;
   display: flex;
}
.videoPlayerOverlay .closeIcon img {
 width: 100%;
 height: auto;
}
.videoPlayerOverlay iframe {
    max-width: 853px;
    max-height: 480px;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.75);
    box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.75);
}
.videoPlayerOverlay.hiddenTransform {
    opacity: 0;
    visibility: hidden;
    transform: translateY(50px);
    -webkit-transform: translateY(50px);
}
@media only screen and (min-width: 1200px) {
    .videoPlayerOverlay .closeIcon:hover {
        cursor: pointer;
        background: rgba(0, 0, 0, 0.5);
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
   }
}