{"id":652,"date":"2023-09-18T05:29:00","date_gmt":"2023-09-18T03:29:00","guid":{"rendered":"https:\/\/blog.pirulug.com\/?p=652"},"modified":"2023-09-18T05:29:00","modified_gmt":"2023-09-18T03:29:00","slug":"bootstrap-que-comparta-un-video-de-youtube-y-que-al-cerrarse-el-modal-reinicie-el-iframe-de-youtube","status":"publish","type":"post","link":"https:\/\/blog.pirulug.com\/?p=652","title":{"rendered":"Bootstrap que comparta un video de YouTube, y que al cerrarse el modal, reinicie el iframe de YouTube"},"content":{"rendered":"

\n Aqu\u00ed tienes un ejemplo de c\u00f3mo crear un modal con Bootstrap que comparta un
\n video de YouTube, y que al cerrarse el modal, reinicie el iframe de YouTube:\n<\/p>\n

<span class="hljs-doctype"><!DOCTYPE html><\/span>\n<span class="hljs-tag"><<span class="hljs-title">html<\/span> <span class="hljs-attribute">lang<\/span>=<span class="hljs-value">"en"<\/span>><\/span>\n<span class="hljs-tag"><<span class="hljs-title">head<\/span>><\/span>\n<span class="hljs-tag"><<span class="hljs-title">meta<\/span> <span class="hljs-attribute">charset<\/span>=<span class="hljs-value">"UTF-8"<\/span>><\/span>\n<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>\n<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>\n<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>\n<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>\n<span class="hljs-tag"><\/<span class="hljs-title">head<\/span>><\/span>\n<span class="hljs-tag"><<span class="hljs-title">body<\/span>><\/span>\n\n<span class="hljs-comment"><!-- Bot\u00f3n que activa el modal --><\/span>\n<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>\n  Abrir Modal\n<span class="hljs-tag"><\/<span class="hljs-title">button<\/span>><\/span>\n\n<span class="hljs-comment"><!-- Modal --><\/span>\n<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>\n  <span class="hljs-tag"><<span class="hljs-title">div<\/span> <span class="hljs-attribute">class<\/span>=<span class="hljs-value">"modal-dialog"<\/span>><\/span>\n    <span class="hljs-tag"><<span class="hljs-title">div<\/span> <span class="hljs-attribute">class<\/span>=<span class="hljs-value">"modal-content"<\/span>><\/span>\n    \n      <span class="hljs-comment"><!-- Modal Header --><\/span>\n      <span class="hljs-tag"><<span class="hljs-title">div<\/span> <span class="hljs-attribute">class<\/span>=<span class="hljs-value">"modal-header"<\/span>><\/span>\n        <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>\n        <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>\n      <span class="hljs-tag"><\/<span class="hljs-title">div<\/span>><\/span>\n      \n      <span class="hljs-comment"><!-- Modal body --><\/span>\n      <span class="hljs-tag"><<span class="hljs-title">div<\/span> <span class="hljs-attribute">class<\/span>=<span class="hljs-value">"modal-body"<\/span>><\/span>\n        <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>\n          <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>\n        <span class="hljs-tag"><\/<span class="hljs-title">div<\/span>><\/span>\n      <span class="hljs-tag"><\/<span class="hljs-title">div<\/span>><\/span>\n      \n      <span class="hljs-comment"><!-- Modal footer --><\/span>\n      <span class="hljs-tag"><<span class="hljs-title">div<\/span> <span class="hljs-attribute">class<\/span>=<span class="hljs-value">"modal-footer"<\/span>><\/span>\n        <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>\n      <span class="hljs-tag"><\/<span class="hljs-title">div<\/span>><\/span>\n      \n    <span class="hljs-tag"><\/<span class="hljs-title">div<\/span>><\/span>\n  <span class="hljs-tag"><\/<span class="hljs-title">div<\/span>><\/span>\n<span class="hljs-tag"><\/<span class="hljs-title">div<\/span>><\/span>\n\n<span class="hljs-tag"><<span class="hljs-title">script<\/span>><\/span><span class="javascript">\n<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>{\n  <span class="hljs-comment">\/\/ Obtener el iframe y la URL del video<\/span>\n  <span class="hljs-keyword">var<\/span> iframe = <span class="hljs-built_in">document<\/span>.getElementById(<span class="hljs-string">'youtubeIframe'<\/span>);\n  <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>\n  \n  <span class="hljs-comment">\/\/ Funci\u00f3n para cargar el video de YouTube en el iframe al abrir el modal<\/span>\n  <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>{\n    iframe.src = youtubeUrl;\n  });\n\n  <span class="hljs-comment">\/\/ Funci\u00f3n para reiniciar el iframe al cerrar el modal<\/span>\n  <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>{\n    iframe.src = <span class="hljs-string">''<\/span>;\n  });\n});\n<\/span><span class="hljs-tag"><\/<span class="hljs-title">script<\/span>><\/span>\n\n<span class="hljs-tag"><\/<span class="hljs-title">body<\/span>><\/span>\n<span class="hljs-tag"><\/<span class="hljs-title">html<\/span>><\/span>\n\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
Aqu\u00ed tienes un ejemplo de c\u00f3mo 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, […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-652","post","type-post","status-publish","format-standard","hentry","category-sin-categoria"],"_links":{"self":[{"href":"https:\/\/blog.pirulug.com\/index.php?rest_route=\/wp\/v2\/posts\/652","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.pirulug.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.pirulug.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.pirulug.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.pirulug.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=652"}],"version-history":[{"count":0,"href":"https:\/\/blog.pirulug.com\/index.php?rest_route=\/wp\/v2\/posts\/652\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.pirulug.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=652"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.pirulug.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=652"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.pirulug.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=652"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}