title: How to toggle reverse action using onclick event
body: <p>I am trying to change video tag object-fit from contain to fill which is working fine but i want to do the reverse means when user click the same button again then it will change the property from fill to contain.</p>
  
  <pre><code>&lt;a href="#" onclick="changeStyle()"&gt;&lt;i class="fa fa-play-circle"&gt;&lt;/i&gt;&lt;/a&gt;
  
  &lt;video controls poster="source-to-thumb.jpg" id="player" style="object-fit:contain;"&gt;
      &lt;source src="source-to-file.mp4" type="video/mp4"/&gt;
  &lt;/video&gt;
  
  &lt;script&gt;
  var video = document.getElementsByTagName('video')[0];
  function changeStyle() {
    if(video.style.objectfit === 'fill') {
      video.style.objectFit = 'contain';
    } else {
      video.style.objectFit = 'fill'
    }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>Any suggestion would be appreciated thanks.</p>