Articulos publicados: 75 Visitas hoy: 45,102
← Volver a Portada
PI Blog
Pirulug Blog

Aviso del sistema de notificaciones de Pirulug Tech.

Bootstrap que comparta un video de YouTube, y que al cerrarse el modal, reinicie el iframe de YouTube

Publicado en Sin categoría por pirulug.

Lectura del Articulo

Aquí tienes un ejemplo de cómo crear un modal con Bootstrap que comparta un
video de YouTube, y que al cerrarse el modal, reinicie el iframe de YouTube: 

<span class="hljs-doctype"><!DOCTYPE html></span>
<span class="hljs-tag"><<span class="hljs-title">html</span> <span class="hljs-attribute">lang</span>=<span class="hljs-value">"en"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">head</span>></span>
<span class="hljs-tag"><<span class="hljs-title">meta</span> <span class="hljs-attribute">charset</span>=<span class="hljs-value">"UTF-8"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">meta</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"viewport"</span> <span class="hljs-attribute">content</span>=<span class="hljs-value">"width=device-width, initial-scale=1.0"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">title</span>></span>Modal con reinicio de iframe de YouTube (JavaScript Vanilla)<span class="hljs-tag"></<span class="hljs-title">title</span>></span>
<span class="hljs-tag"><<span class="hljs-title">link</span> <span class="hljs-attribute">rel</span>=<span class="hljs-value">"stylesheet"</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"https://maxcdn.bootstrapcdn.com/bootstrap/5.3.1/css/bootstrap.min.css"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"https://maxcdn.bootstrapcdn.com/bootstrap/5.3.1/js/bootstrap.min.js"</span>></span><span class="undefined"></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>
<span class="hljs-tag"></<span class="hljs-title">head</span>></span>
<span class="hljs-tag"><<span class="hljs-title">body</span>></span>

<span class="hljs-comment"><!-- Botón que activa el modal --></span>
<span class="hljs-tag"><<span class="hljs-title">button</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"button"</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"btn btn-primary"</span> <span class="hljs-attribute">data-toggle</span>=<span class="hljs-value">"modal"</span> <span class="hljs-attribute">data-target</span>=<span class="hljs-value">"#myModal"</span>></span>
  Abrir Modal
<span class="hljs-tag"></<span class="hljs-title">button</span>></span>

<span class="hljs-comment"><!-- Modal --></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"modal fade"</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"myModal"</span>></span>
  <span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"modal-dialog"</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"modal-content"</span>></span>
    
      <span class="hljs-comment"><!-- Modal Header --></span>
      <span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"modal-header"</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">h4</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"modal-title"</span>></span>Video de YouTube<span class="hljs-tag"></<span class="hljs-title">h4</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">button</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"button"</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"close"</span> <span class="hljs-attribute">data-dismiss</span>=<span class="hljs-value">"modal"</span>></span>&times;<span class="hljs-tag"></<span class="hljs-title">button</span>></span>
      <span class="hljs-tag"></<span class="hljs-title">div</span>></span>
      
      <span class="hljs-comment"><!-- Modal body --></span>
      <span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"modal-body"</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"embed-responsive embed-responsive-16by9"</span>></span>
          <span class="hljs-tag"><<span class="hljs-title">iframe</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"embed-responsive-item"</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"youtubeIframe"</span> <span class="hljs-attribute">allowfullscreen</span>></span><span class="hljs-tag"></<span class="hljs-title">iframe</span>></span>
        <span class="hljs-tag"></<span class="hljs-title">div</span>></span>
      <span class="hljs-tag"></<span class="hljs-title">div</span>></span>
      
      <span class="hljs-comment"><!-- Modal footer --></span>
      <span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"modal-footer"</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">button</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"button"</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"btn btn-secondary"</span> <span class="hljs-attribute">data-dismiss</span>=<span class="hljs-value">"modal"</span>></span>Cerrar<span class="hljs-tag"></<span class="hljs-title">button</span>></span>
      <span class="hljs-tag"></<span class="hljs-title">div</span>></span>
      
    <span class="hljs-tag"></<span class="hljs-title">div</span>></span>
  <span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>

<span class="hljs-tag"><<span class="hljs-title">script</span>></span><span class="javascript">
<span class="hljs-built_in">document</span>.addEventListener(<span class="hljs-string">'DOMContentLoaded'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
  <span class="hljs-comment">// Obtener el iframe y la URL del video</span>
  <span class="hljs-keyword">var</span> iframe = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'youtubeIframe'</span>);
  <span class="hljs-keyword">var</span> youtubeUrl = <span class="hljs-string">'URL_DEL_VIDEO_DE_YOUTUBE'</span>; <span class="hljs-comment">// Reemplaza esto con la URL del video de YouTube</span>
  
  <span class="hljs-comment">// Función para cargar el video de YouTube en el iframe al abrir el modal</span>
  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'myModal'</span>).addEventListener(<span class="hljs-string">'show.bs.modal'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
    iframe.src = youtubeUrl;
  });

  <span class="hljs-comment">// Función para reiniciar el iframe al cerrar el modal</span>
  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'myModal'</span>).addEventListener(<span class="hljs-string">'hidden.bs.modal'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
    iframe.src = <span class="hljs-string">''</span>;
  });
});
</span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>

<span class="hljs-tag"></<span class="hljs-title">body</span>></span>
<span class="hljs-tag"></<span class="hljs-title">html</span>></span>
Comentarios de los Lectores (0)

No hay comentarios aun. ¡Se el primero en comentar!

Escribir un Comentario