title: AngularJS: Hide yotube video until playback starts
body: <p>I am just starting out with angularjs, and am in need of help.</p>
  
  <p>I am loading two videos, both embeded iframes from youtube, in the landing page of my angularJS app. I am obtaining the iframes from a json query I am performing. I have an css3 animation that I would like to display while the content of the page is loading. The loading animation should go away only AFTER the iframes have loaded and playback has started(this part of it going away once playback has started is the most important). This is my view:</p>
  
  <pre><code>&lt;!--animation--&gt;
  &lt;div class="logo hover"&gt;   
    &lt;img class="blinkblink" src = 'images/image.jpg' alt="stuff" /&gt;
  &lt;/div&gt;
  &lt;!--content--&gt;
  &lt;div ng-cloak&gt;
      &lt;div class="background-vid" ng-bind-html="model" ng-cloak&gt;&lt;/div&gt;
      &lt;div class="foreground-vid" ng-bind-html="player" ng-cloak&gt;&lt;/div&gt;
      + MORE CONTENT
  &lt;/div&gt;
  </code></pre>
  
  <p>Looking through some of the angular questions, I found this post:
  <a href="https://stackoverflow.com/questions/19476880/ng-cloak-directive-gets-removed-too-early/19500500#19500500">ng-cloak directive gets removed too early</a></p>
  
  <p>It was somewhat helpful in the sense that once I added </p>
  
  <pre><code>$scope.visible = false;
  </code></pre>
  
  <p>to my controller and also added </p>
  
  <pre><code>ng-if="visible"
  </code></pre>
  
  <p>to my outermost div in my view, the content was hidden from view and the animation was the only thing visible, but the content did not show up after some time. </p>
  
  <p>Now this is my question, how can I edit, or what can I add to, the code from the post I've linked so that, when playback starts on both videos the animation hides, and the rest of the content comes into view?</p>
  
  <p>Thanks everyone, and please let me know if I need to be more specific or if I need to provide more code to get the necessary help. </p>