How can I expand and contract an onClick tag (toggle) size of the video by using JScript?

Every morning!

I am trying to allow the possibility to expand and communicate with the size of videos on my website using a logo rocking in the upper right of the video using css and using the 'onClick' & apply it to the function "video-large-small-toggle' to animate this.

(NB. the video appears when the user clicks on a dive, where the "display: no" css attribute)

(NB. the "home video" css attribute must adjust to the dimensions of the tag 'video-container' 100%)

Here's what I have so far;

< head >

" < script src =" https://AJAX.googleapis.com/AJAX/libs/jQuery/1.11.3/jQuery.min.js "> < / script > .

"" < script type = "text/javascript" src = "... / scripts/change of change-region-region - script.js ' > < / scri

"" < link href = "... / styles/map region/change - region.css" rel = "stylesheet" type = "text/css" / >

< / head >

HTML

< div id = "video-container" >

"" < div class = "video-large-small-toggle" > < img src = "... / Icons/expand.png" alt = "" / > < / div >

"" < div id = "close-small" > < img src = "... / Icons/close40.png" alt = "" / > < / div >

< video width = "600px" height = "400px" autoplay class = "home-video" >

"" < source src = '... / 1920_F_88605360_O5TMQZQ9NsGNMdT4bPoHqsuEPC4W15aF_ST.mov ' type = "video/mp4" / >

< / video >

< / div >

CSS

{#vidéo-container}

border-width: 10px;

border-color: white;

border-style: solid;

cursor: pointer;

border-radius: 4px;

Width: 600px;

height: 400px;

display: none;

position: fixed;

top: 50%;

left: 50%;

transform: translate (50%, 50%);

z index: 20000;

}

{} .home-video

Width: 100%;

height: 100%;

}

And Javascript

$('.video-large-small-toggle').toggle (function () {}

"use strict";

$(this) .animate ({'height': '800px'}, 100);

$(this) .animate ({'width': '1200px'}, 100);

}, function() {}

"use strict";

$(this) .animate ({'height': '400px'}, 100);

$(this) .animate ({'width': '600px'}, 100);

});

Custom player controls are much more complex than the code you have at the moment. See the tutorial below:

http://blog.teamtreehouse.com/building-custom-controls-for-HTML5-videos

Nancy O.

Tags: Dreamweaver

Similar Questions

Maybe you are looking for