Javascript 从左侧滑入HTML5视频并在滑出时播放/暂停？

我有一把小提琴，只要点击一个按钮，一个iframe就会从左边滑入并播放，当它滑出时就会停止

我有点不知所措，不知道如何将其应用于HTML5视频术语中。（基本上是HTML5视频，而不是iframe）我希望视频在单击时滑入并播放，然后在单击时暂停并滑出

任何帮助都将不胜感激，或者如果有人能为我指出如何实现这一目标的正确方向

HTML

<div class="wrapper">

    <div class="content-wrapper">

        <a href="#" id="play-video">Play Video</a>

           <div class="padLeft">
               <p>Paragraph Goes Here</p>
                 <h3>Play Video</h3>
           </div>

   </div>    

    <div class="full-video">

        <iframe id="video" src="//www.youtube.com/embed/vIu85WQTPRc" frameborder="0" allowfullscreen></iframe>

    </div>  

</div>    

JS

var clicked=false;
var src=$("#video")[0].src;
$("#play-video").on('click', function(){
    if(clicked)
    {
        clicked=false;
        $(".full-video").css({"left": "-600px"});
        $("#video")[0].src = src;
        ev.preventDefault();
    }
    else
    {
        clicked=true;
        $(".full-video").css({"left": "0"});
        $("#video")[0].src = src+"?autoplay=1";
        ev.preventDefault();
    }
});

---

我需要将这类东西应用到HTML5中，你知道怎么做吗？用你的视频元素替换，当用户单击以滑入/滑出时，会触发视频ID上的.play（）或.pause方法嘿，谢谢你的回答，你介意在我的代码中为我演示一下吗？非常感谢。它不需要工作，我只想准确地描述我如何编写js。

var clicked=false;
var src=$("#video")[0].src;
$("#play-video").on('click', function(){
    if(clicked)
    {
        clicked=false;
        $(".full-video").css({"left": "-600px"});
        $("#video")[0].src = src;
        ev.preventDefault();
    }
    else
    {
        clicked=true;
        $(".full-video").css({"left": "0"});
        $("#video")[0].src = src+"?autoplay=1";
        ev.preventDefault();
    }
});