Place youtube iframe on another frame with icon closing

Question

How can I place an iframe youtube in a frame with the icon closing. example: - If I want to put the iframe below the frame with the icon closed, and if I click on the icon, close the iframe, then 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 am not 100% sure if this is what you expected, but I hope I 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> 

Answer 2

Here's how to do it with CSS without JavaScript:

• Wrap your iframe in a div.
• Add <input type='checkbox'> above the div and iframe.
• Add <label> after <input type='checkbox'> .
• Hide <input type='checkbox'> with display:none .
• The div style will be invisible with opacity:0 or visibility:hidden *
• Add this rule set:

 input:checked + label + div { visibility: visible; } 

* display:none and display:block works, but it has the ability to break the layout.

The following snippet contains comments on comments

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>