Play ,Pause and Stop Embedded YouTube Video Iframe

-



Reference  

<script  src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

HTML Code 
<div><a href="#" class="play-video">Play Video</a></div>
<div><a href="#" class="stop-video">Stop Video</a></div>
<div><a href="#" class="pause-video">Pause Video</a></div>



<iframe width="560" height="315" src="https://www.youtube.com/embed/WWLsLiVYJRU?enablejsapi=1" frameborder="0"  class="youtube-video" allowfullscreen></iframe>



JQuery Code 
$('a.play-video').click(function(){
       $('.youtube-video')[0].contentWindow.postMessage('{"event":"command","func":"' + 'playVideo' + '","args":""}', '*');
});

$('a.stop-video').click(function(){
       $('.youtube-video')[0].contentWindow.postMessage('{"event":"command","func":"' + 'stopVideo' + '","args":""}', '*');
});

$('a.pause-video').click(function(){
       $('.youtube-video')[0].contentWindow.postMessage('{"event":"command","func":"' + 'pauseVideo' + '","args":""}', '*');
});


Note:
        You have need To add ?enablejsapi=1  in Url. if You Not add This this Code is not work 



Popular posts from this blog

Periodic Restart Settings for Application Pool Recycling

-
Image
Periodic Restart Settings for Application Pool Recycling <periodicRestart> Overview The  <periodicRestart>  element contains configuration settings that allow you to control when an application pool is recycled. You can specify that Internet Information Services (IIS) 7 recycle the application pool after a time interval (in minutes) or at a specific time each day. You can also configure IIS to base the recycle on the amount of virtual memory or physical memory that the worker process in the application pool is using or configure IIS to recycle the application pool after the worker process has processed a specific number of requests Compatibility Version Notes IIS 10.0 The  <periodicRestart>  element was not modified in IIS 10.0. IIS 8.5 The  <periodicRestart>  element was not modified in IIS 8.5. IIS 8.0 The  <periodicRestart>  element was not modified in IIS 8.0. IIS 7.5 The  <periodi...
Read more

Generate image ,pdf and Video Thumb using node js

-
      Using  imagemagick  Generate image thumb                 var im = require( 'imagemagick' );         var image = random() + '.png' ;         var imagepath = 'uploads/images_thumb/' + image;         var pathToFile = path.join(__dirname, req.files[i].path),             pathToSnapshot = path.join(__dirname, '/' + imagepath);         im.resize({             srcPath: pathToFile               , dstPath: pathToSnapshot               , width: 150               , height: 150   ...
Read more

How to receive JSON object in POST and GET using web api

-
  ASP.NET Web API   is a great tool for building HTTP services with ASP.NET. It makes many things HTTP that used to be ill defined in .NET easy and allows you to build a variety of services very easily. Like other complex abstraction frameworks it makes complex scenarios super easy, while some very simple and common operations are not quite as straight forward or as transparent as they should be.   Capturing the raw Request Body But things are not so easy and transparent when you want to pass simple parameters like strings, numbers, dates etc. Because Web API is based on a host of conventions, some things that should be easy, such as easily picking up the raw content of a POST or PUT operation and capturing it, aren't quite so transparent as the automatic type mapping shown above. One thing you might expect to be able to easily do, is to pick up the entire content body and map it to a parameter like this: [ HttpPost ]      ...
Read more