CODEWITHSUNDEEP
javascriptjqueryhtmlcss
simo9900
simo9900

Reputation: 133

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

Upvotes: 5

Views: 700

Answers (2)

kind user
kind user

Reputation: 41893

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>

Upvotes: 4

zer00ne
zer00ne

Reputation: 43880

Here's a way to do it with CSS without JavaScript:

  1. Wrap your iframe in a div.
  2. Add an <input type='checkbox'> above the div and iframe.
  3. Add a <label> after the <input type='checkbox'>.
  4. Hide <input type='checkbox'> with display:none.
  5. Style the div to be invisible with opacity:0, or visibility:hidden*
  6. Add this ruleset:
input:checked + label + div {
      visibility: visible;
  }

*display:none and display:block works as well but it has the possibility to disrupt layout.

The following Snippet includes commented details

SNIPPET

body {
  background: black;
}
#chx1 {
  display: none;
}
label {
  font-size: 40px;
  text-decoration: none;
  color: #fC3;
  cursor: pointer;
}
label:hover {
  color: #0ff;
}
/* This is the style of expanding div */

.expand {
  opacity: 0;
  height: 0;
  width: 480px;
  transition: opacity .4s, max-height 1s linear .3s;
}
/* This is the style of expanding div after checkbox is checked */

/* The :checked pseudo-class is associated to expanding div with adjacent sibling selectors */

#chx1:checked + label + .expand {
  opacity: 1;
  max-height: 270px;
}
<!--Make sure the checkbox has an id-->
<input id='chx1' type='checkbox'>

<!--Make sure the label has a for that 
has the same value as checkbox id value-->
<label for='chx1'>✦</label>

<!--This is the expanding div that wraps around iframe-->
<div class='expand'>

  <!--This is your Youtube iframe inside of expanding iframe-->
  <iframe width="480" height="270" src="http://www.youtube.com/embed/o0u4M6vppCI" frameborder="0" allowfullscreen></iframe>
</div>

Upvotes: 2

Related Questions