Coloca un iframe de youtube en otro marco con el icono cerca

¿Cómo puedo poner un iframe youtube en un marco con el icono cerca. ejemplo: – Si quiero poner el iframe a continuación en el marco con el ícono cerrar, y si hago clic en el icono cerrar el iframe youtube desaparecerá, ¿cómo puedo hacer esto?

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

Gracias

No estoy seguro al 100% si esto es lo que esperabas, pero espero haberte ayudado.

 $(".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> 

Aquí hay una manera de hacerlo con CSS sin JavaScript:

  1. Envuelve tu iframe en un div.
  2. Agregue un <input type='checkbox'> sobre el div y el iframe.
  3. Agregue una <label> después de <input type='checkbox'> .
  4. Ocultar <input type='checkbox'> con display:none .
  5. Estilo el div para ser invisible con opacity:0 , o visibility:hidden *
  6. Agregue este set de reglas:
 input:checked + label + div { visibility: visible; } 

* display:none y display:block funciona, pero tiene la posibilidad de interrumpir el layout.

El siguiente fragment incluye detalles comentados

RETAZO

 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>