Skip to main content

How to embed(Link) youtube video by jquery?

Embed(Link) youtube video by jquery

 
<html>

<head>

<style>


.cus-embed-youtube {

  background-color: #000;

  margin-bottom: 30px;

  position: relative;

  padding-top: 56.25%;

  overflow: hidden;

  cursor: pointer;

}


.cus-embed-youtube img {

  width: 100%;

  top: -16.84%;

  left: 0;

  opacity: 0.7;

}


.cus-embed-youtube .cus-embed-youtube-play {

  width: 68px;

  height: 48px;

  background-color: #333;

  box-shadow: 0 0 30px rgba(0, 0, 0, 0.6);

  z-index: 1;

  opacity: 0.8;

  border-radius: 6px;

}


.cus-embed-youtube .cus-embed-youtube-play:before {

  content: "";

  border-style: solid;

  border-width: 15px 0 15px 26.0px;

  border-color: transparent transparent transparent #fff;

}


.cus-embed-youtube img,

.cus-embed-youtube .cus-embed-youtube-play {

  cursor: pointer;

}


.cus-embed-youtube img,

.cus-embed-youtube iframe,

.cus-embed-youtube .cus-embed-youtube-play,

.cus-embed-youtube .cus-embed-youtube-play:before {

  position: absolute;

}


.cus-embed-youtube .cus-embed-youtube-play,

.cus-embed-youtube .cus-embed-youtube-play:before {

  top: 50%;

  left: 50%;

  transform: translate3d(-50%, -50%, 0);

}


.cus-embed-youtube iframe {

  height: 100%;

  width: 100%;

  top: 0;

  left: 0;

}


.cus-embed-youtube .cus-embed-youtube-play:hover {

  background-color: #f00;

}



</style>

</head>

<body>



<?php



$url = "https://www.youtube.com/watch?v=dQw4w9WgXcQ";

preg_match('%(?:youtube(?:-nocookie)?\.com/(?:[^/]+/.+/|(?:v|e(?:mbed)?)/|.*[?&]v=)|youtu\.be/)([^"&?/ ]{11})%i', $url, $match);

$youtube_id = $match[1];



if(!empty($youtube_id)){

?>

<!-- 1. Video Wrapper Container -->

<div class="cus-embed-youtube" data-video-id="<?php echo $youtube_id; ?>">

  <!-- 2. The preview button that will contain the Play icon -->

  <div class="cus-embed-youtube-play"></div>

</div>

<?php

}

?>


<!-- 1. Video Wrapper Container -->

<div class="cus-embed-youtube" data-video-id="dQw4w9WgXcQ">

  <!-- 2. The preview button that will contain the Play icon -->

  <div class="cus-embed-youtube-play"></div>

</div>

</body>

<script>

(function(){

  let YouTubeContainers = document.querySelectorAll(".cus-embed-youtube");


  // Iterate over every YouTube container you may have

  for (let i = 0; i < YouTubeContainers.length; i++) {

    let container = YouTubeContainers[i];

    let imageSource = "https://img.youtube.com/vi/"+ container.dataset.videoId +"/sddefault.jpg"; 


    // Load the Thumbnail Image asynchronously

    let image = new Image();

    image.src = imageSource;

    image.addEventListener("load", function() {

      container.appendChild(image);

    });


    // When the user clicks on the container, load the embedded YouTube video

    container.addEventListener("click", function() {

      let iframe = document.createElement( "iframe" );


      iframe.setAttribute("frameborder", "0");

      iframe.setAttribute("allowfullscreen", "");

      iframe.setAttribute("allow", "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture");

      // Important: add the autoplay GET parameter, otherwise the user would need to click over the YouTube video again to play it 

      iframe.setAttribute("src", "https://www.youtube.com/embed/"+ this.dataset.videoId +"?rel=0&showinfo=0&autoplay=1");


      // Clear Thumbnail and load the YouTube iframe

      this.innerHTML = "";

      this.appendChild( iframe );

    });

  }

})();

</script>

</html>

Comments

Post a Comment

Popular posts from this blog

How to use inner html value or data in php from javascript(innerHTML)?

 use inner html value or data in php from javascript(innerHTML)? <html> <body> <p id="demo">use inner html value in php(innerhtml)</p> <script>   var jassi = document.getElementById("demo").innerHTML;   //document.write(jassi); </script> <?php $jassi = '<script>document.write(jassi);</script>'; echo $jassi; ?> </body> </html>
Post a Comment
Read more

How to get store data from WCFM(Best Multi Vendor Marketplace) Plugin?

 Get store data from WCFM(Best Multi Vendor Marketplace) Plugin. global $WCFM, $WCFMmp, $wp, $WCFM_Query, $post; $store_id = ''; if ( isset( $attr['id'] ) && !empty( $attr['id'] ) ) { $store_id = absint($attr['id']); } if (  wcfm_is_store_page() ) { $wcfm_store_url = get_option( 'wcfm_store_url', 'store' ); $store_name = apply_filters( 'wcfmmp_store_query_var', get_query_var( $wcfm_store_url ) ); $store_id  = 0; if ( !empty( $store_name ) ) { $store_user = get_user_by( 'slug', $store_name ); } $store_id    = $store_user->ID; } $user_id = $store_id;  $vendor_data = get_user_meta( $user_id, 'wcfmmp_profile_settings', true ); $street_1 = $vendor_data['address']['street_1']; $street_2 = $vendor_data['address']['street_2']; $city     = $vendor_data['address']['city']; $zip      = $vendor_data['address']['zip&#
Post a Comment
Read more

How to create login with phone number in woocommerce wordpress?

Create login with phone number in woocommerce wordpress. function wooc_extra_register_fields() {?>        <p class="form-row form-row-wide">        <label for="reg_billing_phone"><?php _e( 'Phone', 'woocommerce' ); ?><span class="required">*</span></label>        <input type="text" class="input-text" name="billing_phone" id="reg_billing_phone" value="<?php esc_attr_e( $_POST['billing_phone'] ); ?>" />        </p>            <?php  }  add_action( 'woocommerce_register_form_start', 'wooc_extra_register_fields' );  function wooc_validate_extra_register_fields( $username, $email, $validation_errors ) { if ( isset( $_POST['billing_phone'] ) ) {    $hasPhoneNumber= get_users('meta_value='.$_POST['billing_phone']);    if ( !empty($hasPhoneNumber)) {      $validation_er
Post a Comment
Read more