Put a youtube iframe on an other frame with icon close

Question

How can I put an iframe youtube on a frame with icon close. example:- If I want to put the iframe below on frame with icon close, and if I click on icon close the iframe youtube will disappear, how can I do this?

<iframe width="440" height="215" src="http://www.youtube.com/embed/OyRQio7GfLU" frameborder="0" allowfullscreen></iframe>

Thanks

Answer 1

I'm not sure by 100% if this is what did you expect, but I hope I've helped you.

$(".button").click(function() {
  $("#x").addClass('hide');
});

.frame {
  height: auto;
  width: auto;
  padding: 20px;
  border: 1px solid black;
  position: relative;
}
.button {
  position: absolute;
  top: 5px;
  right: 5px;
  height: 20px;
  width: 20px;
  background-color: black;
  color: white;
}
.content {
  display: block;
}
.hide {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="frame">
  <button class='button'>X</button>
  <iframe id='x' class='content' width="440" height="215" src="http://www.youtube.com/embed/OyRQio7GfLU" frameborder="0" allowfullscreen></iframe>
</div>