simo9900 simo9900 - 2 months ago 15
CSS Question

Put a youtube iframe on an other frame with icon close

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

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 !important;
}
<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>