title: Play iframe video on click of link
body: <p>Hi i would like a youtube video pop up to open when the user clicks a particular link on my webpage. I have tried and tried to work this out but have really struggled. I'm sure this is achievable through JQuery but i'm not sure.</p>
  
  <p>HTML is</p>
  
  <pre><code>&lt;div class="audiodemo"&gt;
  &lt;div class="audiodemoheader"&gt; “Welcome to the Recovery Show, who's on   board?”&lt;/div&gt;
  &lt;div class="audiodemolink"&gt;&lt;a href="http://www.youtube.com/watch?v=kh29_SERH0Y?  rel=0" rel="prettyPhoto" class="demolink"&gt;Listen&lt;/a&gt;&lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>CSS is</p>
  
  <pre><code>.audiodemo {
  width: 100%;
  height: 300px;
  float: left;
  background-image: url(../images/hero.jpg);
  }
  
  .audiodemoheader {
  width:100%;
  height:auto;
  text-align:center;
  float:left;
  margin-top:94.5px;
  font: 200 18px/1.3 'Roboto', 'Helvetica Neue', 'Segoe UI Light', sans-serif;
  font-size: 30px;
  font-weight: 200;
  color: #FFF;
  
  }
  
  .audiodemolink {
  width:100%;
  height:auto;
  text-align:center;
  float:left;
  margin-top:40px;
  
  
  }
  
  
  .audiodemolink .demolink {
  display: inline-block;
  font-weight: 700;
  text-transform: uppercase;
  padding: 11px 51px;
  border: 3px solid #fff;
  -webkit-transition: .2s;
  transition: .2s;
  color:#FFF;
  text-decoration:none;
  margin-left:auto;
  margin-right:auto;
  }
  
  .audiodemolink .demolink:hover {
  opacity: 0.7;
  }
  </code></pre>
  
  <p>Thanks in advance</p>