• html,  javascript,  mysql

    How to play youtube on pop up on click of image

    The sample

    The code

    <style>
        .col-xs-12.partitle {
            text-align: center;
            padding: 38px;
            font-size: 28px;
            text-transform: uppercase;
            font-family: 'Spartan';
        }
        .trailer{margin-top:20px;margin-left:20px;margin-right:20px;padding:20px;}
        .trailer .title{ font-size:14px;font-family: 'Spartan';
            font-weight:bold; 
            margin-top:20px;
        }
        .trailer .titled{ font-size:12px;font-family: 'Spartan';
            font-weight:normal;
        }
        .lifeunderpar .banner{background:#222;position:relative;}
        
        /*******************Video main********************/
        
        .video-play-buttonm {
          position: absolute;
          z-index: 10;
          top:50%;
          left:50%;
          transform: translateX(-50%) translateY(-50%);
          box-sizing: content-box;
          display: block;
          width: 32px;
          height: 44px;
          /* background: #fa183d; */
          border-radius: 50%;
          padding: 18px 20px 18px 28px;
        }
        
        .video-play-buttonm:before {
          content: "";
          position: absolute;
          z-index: 0;
          left: 50%;
          top:50%;
          transform: translateX(-50%) translateY(-50%);
          display: block;
          width: 80px;
          height: 80px;
          background: transparent;
          border-radius: 50%;
          border:4px solid #ffffff;
          /*animation: pulse-border 1500ms ease-out infinite;*/
        }
        
        .video-play-buttonm:after {
          content: "";
            position: absolute;
            z-index: 1;
            left: 50%;
            top:50%;
            transform: translateX(-50%) translateY(-50%);
            display: block;
            width: 15px;
            height: 15px;
            background: #652dd314;
            border-radius: 0;
            transition: all 200ms;
            border-left: 24px solid #fff;
            border-top:16px solid transparent;
            border-bottom: 16px solid transparent;
        }
        
        }
        
        .video-play-buttonm:hover:after {
          background-color: darken(#fa183d, 10%);
        }
        
        .video-play-buttonm img {
          position: relative;
          z-index: 3;
          max-width: 100%;
          width: auto;
          height: auto;
        }
        
        .video-play-buttonm span {
         /* display: block;*/
         /* position: relative;*/
         /* z-index: 3;*/
         /* width: 0;*/
         /* height: 0;*/
         /* border-left: 32px solid #fff;*/
            /*border-top:22px solid transparent;*/
            /*border-bottom: 22px solid transparent;*/
        }
        
        @keyframes pulse-border {
          0% {
            transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
            opacity: 1;
          }
          100% {
            transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
            opacity: 0;
          }
        }
        
        
        
        .video-overlaym {
          position: fixed;
          z-index: -1;
          top:100px;
          bottom: 0;
          left: 0;
          right: 0;
          background: rgba(0,0,0,0.80);
          opacity: 0;
          transition: all ease 500ms;
        }
        
        .video-overlaym.open {
          position: fixed;
          z-index: 1000;
          opacity: 1;
        }
        
        .video-overlaym-close {
          position: absolute;
          z-index: 1000;
          top:15px;
          right: 20px;
          font-size: 36px;
          line-height: 1;
          font-weight: 400;
          color: #fff;
          text-decoration: none;
          cursor: pointer;
          transition: all 200ms;
        }
        
        .video-overlaym-close:hover {
          color: #fa183d;
        }
        
        .video-overlaym iframe {
          position: absolute;
          top:50%;
          left: 50%;
          transform: translateX(-50%) translateY(-50%);
          /* width: 90%; */
          /* height: auto; */
          box-shadow: 0 0 15px rgba(0,0,0,0.75);
        }
        /*******************Video end********************/
        .ytimg{
               height: 100%;
            width: 100%;
            max-width: 100%;
            max-height:100%;
            position:relative;
        }
        .row.trailer > div {
            margin-bottom: 25px;
        }
       
    
        
        @media only screen and (max-width: 500px) {
            .trailer{margin-top:20px;margin-left:8px;margin-right:8px;padding:20px;}
            
        }
        </style>
        
        <div class="container-fluid">
            <div class="lifeunderpar" >
                <div class="banner">
                    <img src="https://www.webmentor.in/wp-content/uploads/2019/10/cropped-qtq50-ytdL78.jpeg" />
                   
                    <a id="play-videom" class="video-play-buttonm" href="#">
                        <span></span>
                    </a>
                    <div id="video-overlaym" class="video-overlaym">
                    <a class="video-overlaym-close">&times;</a>
                    </div>
                </div>
            </div>
            
        </div>
        
        <script>
            jQuery('#play-videom').on('click', function(e){
          e.preventDefault();
          jQuery('#video-overlaym').addClass('open');
          jQuery("#video-overlaym").append('<iframe width="100%" height="480" src="https://www.youtube.com/embed/aUw3vDdy8wk" frameborder="0" allowfullscreen></iframe>');
        });
        
        jQuery('.video-overlaym, .video-overlaym-close').on('click', function(e){
          e.preventDefault();
          close_videom();
        });
        
        jQuery(document).keyup(function(e){
          if(e.keyCode === 27) { close_videom(); }
        });
        
        function close_videom() {
          jQuery('.video-overlaym.open').removeClass('open').find('iframe').remove();
        };
        </script>
        
       
  • html

    Html Signature code sample

    Web Mentor
    Web Developer
    webmentor.in@gmail.com
    +91 9000000000

    https://www.webmentor.in/
    xyz plot 8
    lane abc,
    City name , 04756363
    Confidentiality Notice: This e-mail message, including any attachments, is for the sole use of the intended recipient(s) and may contain confidential and privileged information. Any unauthorized review, use, disclosure or distribution of this information is prohibited, and may be punishable by law. If this was sent to you in error, please notify the sender by reply e-mail and destroy all copies of the original message. Please consider the environment before printing this e-mail.
    <table border="0" cellpadding="0" cellspacing="0" width="500">
      <tbody>
       
        <tr>
          <td height="50" style="font-family:Helvetica, Arial, sans-serif; font-size:18px; font-style:bold;">
            <strong>Web Mentor</strong>
            <br>
            <em style="font-size:17px; font-weight:400;">Web Developer</em>
          </td>
        </tr>
            <tr>
          <td class="hover" height="" style="font-family:Helvetica, Arial, sans-serif; font-size:16px; color:#333;">
            <a href="mailto:" onMouseOver="this.style.color='#71080a'" onMouseOut="this.style.color='#333'"  style="color:#333; ">xyz@g.com</a>
            <br>
           000000000000
              <br><br>
          </td>
        </tr>
           <tr>
          <td border="0" cellpadding="0" cellspacing="0" height="auto" width="190">
              <a href="https://www.webmentor.in/" onMouseOver="this.style.color='#000'" onMouseOut="this.style.color='#d0292d'" target="_blank" style="color:#d0292d;">  <img src="https://www.webmentor.in/" alt="https://www.webmentor.in/"></a>
          </td>
        </tr>
        <tr>
          <td height="58" style="font-family:Helvetica, Arial, sans-serif; font-size:16px; color:#4d4d4e;">
            xyz plot 8
              <br>lane abc, 
            <br>City name , 04756363
          </td>
        </tr>
      
        <tr>
          <td height="70">
            <small style="font-family:Helvetica, Arial, sans-serif; font-size:10px; color:#4d4d4e;">Confidentiality Notice: This e-mail message, including any attachments, is for the sole use of the intended recipient(s) and may contain confidential and privileged information. Any unauthorized review, use, disclosure or distribution of this information is prohibited, and may be punishable by law. If this was sent to you in error, please notify the sender by reply e-mail and destroy all copies of the original message. Please consider the environment before printing this e-mail.</small>
          </td>
        </tr>
      </tbody>
    </table>