video test

by dirkk0

HTML

<button id="go1">&raquo; Animate Block1</button>
<button id="go4">&raquo; Reset</button>

<video id="vid1" width="240" height="133" poster="http://cdn.kaltura.org/apis/html5lib/kplayer-examples/media/bbb480.jpg durationHint="33" controls>
<source src="http://cdn.kaltura.org/apis/html5lib/kplayer-examples/media/bbb_trailer_iphone.m4v">
<source src="http://cdn.kaltura.org/apis/html5lib/kplayer-examples/media/bbb400p.ogv" /></video>

<video id="vid2" width="240" height="133" poster="http://cdn.kaltura.org/apis/html5lib/kplayer-examples/media/bbb480.jpg durationHint="33" controls>
<source src="http://cdn.kaltura.org/apis/html5lib/kplayer-examples/media/bbb_trailer_iphone.m4v">
<source src="http://cdn.kaltura.org/apis/html5lib/kplayer-examples/media/bbb400p.ogv" /></video>

CSS

div {
    background-color:#bca;
    width:240px;
    height:133px;
    text-align:center;
    border:2px solid green;
    margin:3px;
    font-size:14px;
}
button {
    font-size:14px;
}

JavaScript

$("#go1").click(function() {
    $("#vid1").animate({
        width: "290",
        height: "163"
     }, {
        queue: false,
        duration: 500
    });
        $("#vid2").animate({
        width: "290",
        height: "163"
      }, {
        queue: false,
        duration: 500
    });

});

$("#go4").click(function() {
    $("#vid1").css({
        width: "",
        height: ""
    });
    $("#vid2").css({
        width: "",
        height: ""
    });
});