• html,  javascript,  mysql

    How to play youtube on pop up on click of image

    / October 7, 2021 / 0 Comments

    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>
    read more
  • mysql

    Select Query

    / April 14, 2021 / 0 Comments
    customer table
    Customer IdCustomerNameDeptId
    005MeenaD002
    006ReenaD001
    008DinaD002
    salary table
    IdSalaryDeptId
    00520000D002
    00620004D001
    00830000D002
    Department table
    DepartmentDeptId
    AccountD002
    TechnicalD001
    AccountD002
    Q) select customer name from table with deptid

    Select CustomerName, DeptId from customer

    Q) select customer name from table where dept D002

    Select CustomerName from customer where DeptId=’D002′

    read more
  • javascript,  laravel,  mysql,  php

    Laravel-date format variable SQL query for API value

    / November 29, 2019 / 0 Comments

    given date value in string format , getting error in SQL query , so have to change it into date format in Laravel using Carbon function ( for date time )

    laravel controller sample work to get values in json [RestAPI]
    <?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Http\Resources\OrdersCollection;
use Illuminate\Support\Facades\DB;
use App\Http\Controllers\Controller;
use app\Orders;
use Response;
use Carbon\Carbon;

class OrdersController extends Controller
{
    //
    public function index(Request $request)
    {
        $fdate = $request->query('fdate');
        $gdate = $request->query('gdate');


        $users = DB::table('abctable')
            ->select(DB::raw('count(*) as count, city'))
            ->join('n3d_sales_flat_order_address', 
         'abctable.entity_id', '=', 'xyztable.parent_id')
            ->whereBetween('abctable.created_at',[new Carbon($fdate),new Carbon($gdate)])
            ->groupBy('xyztable.city')
            ->get();
           
       return Response::json($users);
    }
}

    Carbon function

    $users = DB::table(‘abctable’)
    ->select(DB::raw(‘count(*) as count, city’))
    ->join(‘n3d_sales_flat_order_address’,
    ‘abctable.entity_id’, ‘=’, ‘xyztable.parent_id’)
    ->whereBetween(‘abctable.created_at’,[new Carbon($fdate),new Carbon($gdate)])
    ->groupBy(‘xyztable.city’)
    ->get();

    read more