3 Replies Latest reply on Feb 22, 2016 2:16 PM by Nancy OShea

    How do I expand & contract a video size tag (on toggle) onClick using JScript?

    toddg10857565 Level 1

      Morning all!

       

      I'm trying to allow the ability to enlarge and contact the size of videos on my website by using a toggle logo in the top right hand corner of the video by using css and using the "onClick" & applying this to the "video-large-small-toggle" function to animate this.

       

      (N.B. The video pops out when the user clicks on a dive, hence the "display:none" css attribute)

      (N.B. The "home-video" css attribute is to fit the dimensions of the "video-container" tag 100%)

       

      Here is 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 Region/change-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

      #video-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%;

      }

       

      & 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);

      });