CODEWITHSUNDEEP
javascriptjqueryhtmlcssvideo
user2498890
user2498890

Reputation: 1556

How to slide in video and auto play at the same time with jQuery?

I would like to slide a video in from the left on click of a button and auto play at the same time. In my jsfiddle I've used a youtube video but in my site I will be using HTML5 video.

I've tried using the following code but the video comes up with an error when it should be auto playing. I want the video to then pause when it slides back out on click.

So slide in from left- play, slide out to left - pause.

HTML 

<div class="wrapper">

   <div class="content-wrapper"
         <a href="#" id="play-video">Play Video</a>
   </div>    

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

</div>

CSS

.wrapper {
width: 100%;
height: 400px;
position: absolute;
overflow: hidden;
margin: 0;
padding:0;
z-index: 1;
}

.content-wrapper {
position: absolute;
z-index: 999;
background: red;
bottom: -90px;
width: 100%;
-webkit-transition: bottom 1s;
-moz-transition: bottom 1s;
transition: bottom 1s;    
}

#play-video {
position: absolute;
background-color: blue;
z-index: 999;
cursor: pointer;
}

.full-video {
position: absolute;
left: -600px;
z-index: 1;
width: 100%;
height: 100%;
-webkit-transition: left 1s;
-moz-transition: left 1s;
transition: left 1s;  
}

.full-video iframe {
 width: 100%;
 height: 100%; 
}

JS 

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

Here are some jsfiddle's

Just slide in … http://jsfiddle.net/8ZFMJ/58/ Slide in and code from above… http://jsfiddle.net/8ZFMJ/59/

Any help would be appreciated.

Upvotes: 0

Views: 3988

Answers (1)

SW4
SW4

Reputation: 71170

Demo Fiddle

You werent using a correctly formed querystring, you were starting it with an ampersand (&) not a ?, in addition, you were setting autoplay=0/1 the wrong way around.

Updated jQuery:

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();
    }
});

Upvotes: 1

Related Questions