title: Stop a youtube video in an iframe when the div it is in is display:none
body: <p>I have a div, "c1" which is display:none except when div "p1" is hovered. In "c1" there is a YouTube video set to auto play. in chrome when the div is visible the video starts but when it disappears the video keeps playing. Is there a way to stop it with only HTML and CSS or do I need JS?</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="p1 parent"&gt;&lt;/div&gt;
  &lt;div class="c1 child"&gt;&lt;iframe class="embededInChild" src="https://www.youtube.com/embed/VLrULbtD-oo?autoplay=1" frameborder="1"&gt;&lt;/iframe&gt;
  &lt;p class="childDescription"&gt;enjoy beautiful downtown bethesda just X miles from campus!&lt;/p&gt;&lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.child {
      display: none;
      width:494px;
      height:300px;
      position:absolute;
      background-color: #E3EBF1;
      border-radius: 10px;
      border: 1px solid #333333;
      left:0px;
      top:-320px;
  }
  
  .parent{
    background-color: #7BB9E0;
    width:110px;
    height:110px;
    border:2px solid black;
    display: block;
    border-radius:55px;
    margin: 5px;
    display: inline-block;
    float:left;
  }
  
  .parent:hover{
    background-color: #CCCCCC;
    border-color: #93305D;
  }
  
  .embededInChild{
      width:474px;
      height:250px;
      margin: 5px 10px 0px 10px;
  }
  
  p.childDescription{
      line-height:12px;
      margin:5px 5px 0px 5px;
      padding:0px;
      color: #333333;
      text-align: center;
  }
  
  .p1:hover + .c1 {
      display: block;
  }
  </code></pre>