Cómo insertar un vídeo de YouTube y que sea responsive

Herramientas Digitales Redes Sociales

Cómo insertar un vídeo de YouTube y que sea responsive

2/08/2024 0

Insertar un vídeo de YouTube en una entrada de blog o una página web es una tarea algo sencilla. Con un breve retoque y de forma fácil, se puede insertar un vídeo de YouTube y que sea responsive.

El primer paso es visitar YouTube y buscar el vídeo a incrustar en nuestro blog o página web, luego se debe pulsar en el botón de «Compartir».

Se abrirán varias opciones para compartir el vídeo, en nuestro caso nos interesa insertar el vídeo en formato HTML, para ello, hay que pulsar la primera opción, en la de «Incorporar» (Insertar).

Ahora aparecerá el cuadro «Incorporar vídeo» donde se encuentra el código HTML a pegar del vídeo que queremos insertar en nuestro blog o página web.

Tan solo debes copiar y pegar dicho código en donde se necesite, agregándole el div class="video-contenedor":

<div class="video-contenedor" style="text-align: center;">
<iframe width="560" height="315" src="https://www.youtube.com/embed/rqQS881elO0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>

Luego al «style» de nuestro blog o página web debes agregar el siguiente código css para hacer el vídeo responsive:

.video-contenedor { position: relative; padding-bottom: 70%; padding-top: 0px; height: 0; overflow: hidden; } .video-contenedor iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

El siguiente vídeo es el resultado de haber pegado el código HTML de los cuadros anteriores:

Jorge Andres Amaya

Licenciado en Economía y maestría en Administración, con amplio dominio de diversas herramientas digitales y prompts.

<script src='https://www.blogger.com/static/v1/jsbin/4269703388-comment_from_post_iframe.js' type='text/javascript'></script>

<script type="text/javascript" src="https://www.blogger.com/static/v1/widgets/4290687098-widgets.js"></script>
<script type='text/javascript'>
window['__wavt'] = 'AOuZoY5R8y08NhaFP2mkDuUTlO7rAuchOA:1714743708198';_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d8920084217865318026','//jorgeandresamaya.blogspot.com/2024/02/como-insertar-un-video-de-youtube-y-que-sea-responsive.html','8920084217865318026');
_WidgetManager._SetDataContext([{'name': 'blog', 'data': {'blogId': '8920084217865318026', 'title': 'Descubre con Jorge Andr\xe9s Amaya', 'url': 'https://jorgeandresamaya.blogspot.com/2024/02/como-insertar-un-video-de-youtube-y-que-sea-responsive.html', 'canonicalUrl': 'https://jorgeandresamaya.blogspot.com/2024/02/como-insertar-un-video-de-youtube-y-que-sea-responsive.html', 'homepageUrl': 'https://jorgeandresamaya.blogspot.com/', 'searchUrl': 'https://jorgeandresamaya.blogspot.com/search', 'canonicalHomepageUrl': 'https://jorgeandresamaya.blogspot.com/', 'blogspotFaviconUrl': 'https://jorgeandresamaya.blogspot.com/favicon.ico', 'bloggerUrl': 'https://www.blogger.com', 'hasCustomDomain': false, 'httpsEnabled': true, 'enabledCommentProfileImages': true, 'gPlusViewType': 'FILTERED_POSTMOD', 'adultContent': false, 'analyticsAccountNumber': 'G-D8L9Q7J8BC', 'analytics4': true, 'encoding': 'UTF-8', 'locale': 'es-419', 'localeUnderscoreDelimited': 'es_419', 'languageDirection': 'ltr', 'isPrivate': false, 'isMobile': false, 'isMobileRequest': false, 'mobileClass': '', 'isPrivateBlog': false, 'isDynamicViewsAvailable': true, 'feedLinks': '\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Descubre con Jorge Andr\xe9s Amaya - Atom\x22 href\x3d\x22https://jorgeandresamaya.blogspot.com/feeds/posts/default\x22 /\x3e\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/rss+xml\x22 title\x3d\x22Descubre con Jorge Andr\xe9s Amaya - RSS\x22 href\x3d\x22https://jorgeandresamaya.blogspot.com/feeds/posts/default?alt\x3drss\x22 /\x3e\n\x3clink rel\x3d\x22service.post\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Descubre con Jorge Andr\xe9s Amaya - Atom\x22 href\x3d\x22https://www.blogger.com/feeds/8920084217865318026/posts/default\x22 /\x3e\n\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Descubre con Jorge Andr\xe9s Amaya - Atom\x22 href\x3d\x22https://jorgeandresamaya.blogspot.com/feeds/6714280004372206135/comments/default\x22 /\x3e\n', 'meTag': '', 'adsenseClientId': 'ca-pub-8053032436172758', 'adsenseHostId': 'ca-host-pub-1556223355139109', 'adsenseHasAds': false, 'adsenseAutoAds': false, 'boqCommentIframeForm': true, 'loginRedirectParam': '', 'view': '', 'dynamicViewsCommentsSrc': '//www.blogblog.com/dynamicviews/4224c15c4e7c9321/js/comments.js', 'dynamicViewsScriptSrc': '//www.blogblog.com/dynamicviews/a26ecadc30bb77e6', 'plusOneApiSrc': 'https://apis.google.com/js/platform.js', 'disableGComments': true, 'interstitialAccepted': false, 'sharing': {'platforms': [{'name': 'Obtener v\xednculo', 'key': 'link', 'shareMessage': 'Obtener v\xednculo', 'target': ''}, {'name': 'Facebook', 'key': 'facebook', 'shareMessage': 'Compartir en Facebook', 'target': 'facebook'}, {'name': 'BlogThis!', 'key': 'blogThis', 'shareMessage': 'BlogThis!', 'target': 'blog'}, {'name': 'Twitter', 'key': 'twitter', 'shareMessage': 'Compartir en Twitter', 'target': 'twitter'}, {'name': 'Pinterest', 'key': 'pinterest', 'shareMessage': 'Compartir en Pinterest', 'target': 'pinterest'}, {'name': 'Correo electr\xf3nico', 'key': 'email', 'shareMessage': 'Correo electr\xf3nico', 'target': 'email'}], 'disableGooglePlus': true, 'googlePlusShareButtonWidth': 0, 'googlePlusBootstrap': '\x3cscript type\x3d\x22text/javascript\x22\x3ewindow.___gcfg \x3d {\x27lang\x27: \x27es_419\x27};\x3c/script\x3e'}, 'hasCustomJumpLinkMessage': true, 'jumpLinkMessage': 'Leer m\xe1s\xbb', 'pageType': 'item', 'postId': '6714280004372206135', 'postImageThumbnailUrl': 'https://i.ytimg.com/vi/rqQS881elO0/default.jpg', 'postImageUrl': 'https://live.staticflickr.com/65535/53516943346_b5e5cacb29_z.jpg', 'pageName': 'C\xf3mo insertar un v\xeddeo de YouTube y que sea responsive', 'pageTitle': 'Descubre con Jorge Andr\xe9s Amaya: C\xf3mo insertar un v\xeddeo de YouTube y que sea responsive', 'metaDescription': 'Con un breve retoque y de forma f\xe1cil, se puede insertar un v\xeddeo de YouTube y que sea responsive.'}}, {'name': 'features', 'data': {}}, {'name': 'messages', 'data': {'edit': 'Editar', 'linkCopiedToClipboard': 'V\xednculo copiado al portapapeles', 'ok': 'Aceptar', 'postLink': 'Publicar v\xednculo'}}, {'name': 'template', 'data': {'name': 'custom', 'localizedName': 'Personalizado', 'isResponsive': true, 'isAlternateRendering': false, 'isCustom': true}}, {'name': 'view', 'data': {'classic': {'name': 'classic', 'url': '?view\x3dclassic'}, 'flipcard': {'name': 'flipcard', 'url': '?view\x3dflipcard'}, 'magazine': {'name': 'magazine', 'url': '?view\x3dmagazine'}, 'mosaic': {'name': 'mosaic', 'url': '?view\x3dmosaic'}, 'sidebar': {'name': 'sidebar', 'url': '?view\x3dsidebar'}, 'snapshot': {'name': 'snapshot', 'url': '?view\x3dsnapshot'}, 'timeslide': {'name': 'timeslide', 'url': '?view\x3dtimeslide'}, 'isMobile': false, 'title': 'C\xf3mo insertar un v\xeddeo de YouTube y que sea responsive', 'description': 'Con un breve retoque y de forma f\xe1cil, se puede insertar un v\xeddeo de YouTube y que sea responsive.', 'featuredImage': 'https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_uIZgUjbAIXd1cGF8WmgCQrfHle3Y7A6myigRj3OBEK7wbcGVUUTeJtvpL_b4-RSzCFbwGZ6bjqYPo_dEdhCA9B1N0OB8CfwOiSlx5Mn9py1lItBjMDvUcZ4jxgZp4KXZQkiC0', 'url': 'https://jorgeandresamaya.blogspot.com/2024/02/como-insertar-un-video-de-youtube-y-que-sea-responsive.html', 'type': 'item', 'isSingleItem': true, 'isMultipleItems': false, 'isError': false, 'isPage': false, 'isPost': true, 'isHomepage': false, 'isArchive': false, 'isLabelSearch': false, 'postId': 6714280004372206135}}, {'name': 'widgets', 'data': [{'title': 'Descubre con Jorge Andr\xe9s Amaya (Encabezado)', 'type': 'Header', 'sectionId': 'header', 'id': 'Header51'}, {'title': 'Menu', 'type': 'PageList', 'sectionId': 'header', 'id': 'PageList51'}, {'title': 'Breaking News', 'type': 'PopularPosts', 'sectionId': 'header', 'id': 'PopularPosts51', 'posts': [{'title': 'Comando CHKDSK: Escanear, comprobar y reparar disco duro en Windows 7, 8, 8.1, 10', 'id': 5962145820633896819}, {'title': 'Classroom: Cancelar el registro en una clase ', 'id': 6645547620232649238}, {'title': 'Corrige c\xf3digos PHP', 'id': 6866868691139969646}, {'title': 'Laptop no apaga completamente, se quedan luces encendidas', 'id': 8974761346249535819}, {'title': 'Insertar s\xedmbolos en Word 2019 y Office 365', 'id': 5484225059083824267}, {'title': 'ZenoChat: IA para generar contenido personalizado', 'id': 4753165614803949392}, {'title': 'Blogger: Insertar cuadro de texto', 'id': 1163749180964380021}, {'title': 'Poner comentarios de Facebook en Blogger', 'id': 4772418176415156556}, {'title': 'Importar bases de datos MySQL mayores de 50 Mb, cuando superan los l\xedmites de phpMyAdmin', 'id': 1139618521198686104}, {'title': 'Exportar bases de datos MySQL mayores de 50 Mb', 'id': 240842212555423135}]}, {'title': 'Entradas del blog', 'type': 'Blog', 'sectionId': 'Hero', 'id': 'Blog99', 'posts': [{'id': '6714280004372206135', 'title': 'C\xf3mo insertar un v\xeddeo de YouTube y que sea responsive', 'featuredImage': 'https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_uIZgUjbAIXd1cGF8WmgCQrfHle3Y7A6myigRj3OBEK7wbcGVUUTeJtvpL_b4-RSzCFbwGZ6bjqYPo_dEdhCA9B1N0OB8CfwOiSlx5Mn9py1lItBjMDvUcZ4jxgZp4KXZQkiC0', 'showInlineAds': false}], 'footerBylines': [{'regionName': 'footer1', 'items': [{'name': 'author', 'label': 'Publicadas por'}, {'name': 'timestamp', 'label': 'a la/s '}, {'name': 'comments', 'label': 'comentarios'}]}, {'regionName': 'footer2', 'items': [{'name': 'labels', 'label': 'Etiquetas:'}]}, {'regionName': 'footer3', 'items': [{'name': 'location', 'label': 'Ubicaci\xf3n:'}]}], 'allBylineItems': [{'name': 'author', 'label': 'Publicadas por'}, {'name': 'timestamp', 'label': 'a la/s '}, {'name': 'comments', 'label': 'comentarios'}, {'name': 'labels', 'label': 'Etiquetas:'}, {'name': 'location', 'label': 'Ubicaci\xf3n:'}]}, {'title': '{ content: \x22carousel\x22, top: 2 }', 'type': 'PopularPosts', 'sectionId': 'upper', 'id': 'PopularPosts52', 'posts': [{'title': 'Comando CHKDSK: Escanear, comprobar y reparar disco duro en Windows 7, 8, 8.1, 10', 'id': 5962145820633896819}, {'title': 'Laptop no apaga completamente, se quedan luces encendidas', 'id': 8974761346249535819}, {'title': 'Poner comentarios de Facebook en Blogger', 'id': 4772418176415156556}, {'title': 'Insertar un v\xeddeo de YouTube en Microsoft Word 2010', 'id': 5806285034840734037}, {'title': 'Corrige c\xf3digos PHP', 'id': 6866868691139969646}, {'title': 'Herramienta Comprobador de archivos de sistema para reparar archivos de sistema que faltan o est\xe1n da\xf1ados', 'id': 544163844692896316}, {'title': 'Importar bases de datos MySQL mayores de 50 Mb, cuando superan los l\xedmites de phpMyAdmin', 'id': 1139618521198686104}, {'title': 'Aumentar memoria RAM - Windows 7 de 32 bits', 'id': 4435252364746080494}, {'title': 'Elige tu local de votaci\xf3n - ONPE', 'id': 3714084441924423285}, {'title': 'LinkedIn: Informa a los reclutadores de selecci\xf3n que est\xe1s interesado en nuevas oportunidades de empleo', 'id': 1692668970392750479}]}, {'title': 'Entradas del blog', 'type': 'Blog', 'sectionId': 'Content', 'id': 'Blog1', 'posts': [{'id': '6714280004372206135', 'title': 'C\xf3mo insertar un v\xeddeo de YouTube y que sea responsive', 'featuredImage': 'https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_uIZgUjbAIXd1cGF8WmgCQrfHle3Y7A6myigRj3OBEK7wbcGVUUTeJtvpL_b4-RSzCFbwGZ6bjqYPo_dEdhCA9B1N0OB8CfwOiSlx5Mn9py1lItBjMDvUcZ4jxgZp4KXZQkiC0', 'showInlineAds': false}], 'footerBylines': [{'regionName': 'footer1', 'items': [{'name': 'author', 'label': ''}, {'name': 'timestamp', 'label': ''}, {'name': 'comments', 'label': ''}, {'name': 'share', 'label': ''}]}, {'regionName': 'footer2', 'items': [{'name': 'labels', 'label': ''}]}, {'regionName': 'footer3', 'items': [{'name': 'reactions', 'label': ''}]}], 'allBylineItems': [{'name': 'author', 'label': ''}, {'name': 'timestamp', 'label': ''}, {'name': 'comments', 'label': ''}, {'name': 'share', 'label': ''}, {'name': 'labels', 'label': ''}, {'name': 'reactions', 'label': ''}]}, {'title': 'Facebook', 'type': 'HTML', 'sectionId': 'sidebar', 'id': 'HTML3'}, {'title': 'TuTiendaEnLinea', 'type': 'HTML', 'sectionId': 'sidebar', 'id': 'HTML6'}, {'title': 'YouTube', 'type': 'HTML', 'sectionId': 'sidebar', 'id': 'HTML4'}, {'title': 'Buscar', 'type': 'BlogSearch', 'sectionId': 'sidebar', 'id': 'BlogSearch51'}, {'title': '{ title: \x22Tendencias\x22, content: \x22trending\x22 }', 'type': 'PopularPosts', 'sectionId': 'sidebar', 'id': 'PopularPosts53', 'posts': [{'title': 'Comando CHKDSK: Escanear, comprobar y reparar disco duro en Windows 7, 8, 8.1, 10', 'id': 5962145820633896819}, {'title': 'Classroom: Cancelar el registro en una clase ', 'id': 6645547620232649238}, {'title': 'Herramientas IA para celulares que optimizan tu productividad', 'id': 1216546507947297666}, {'title': 'Corrige c\xf3digos PHP', 'id': 6866868691139969646}]}, {'title': '{ title: \x22Comentarios\x22, content: \x22comments\x22 }', 'type': 'Text', 'sectionId': 'sidebar', 'id': 'Text51'}, {'title': 'Example', 'type': 'HTML', 'sectionId': 'sidebar-post', 'id': 'HTML55'}, {'title': 'Example', 'type': 'HTML', 'sectionId': 'sidebar-page', 'id': 'HTML56'}, {'title': 'Modo', 'type': 'Text', 'sectionId': 'Filters', 'id': 'Text52'}, {'title': 'Orden', 'type': 'Text', 'sectionId': 'Filters', 'id': 'Text53'}, {'title': 'T\xe9rminos', 'type': 'BlogSearch', 'sectionId': 'Filters', 'id': 'BlogSearch52'}, {'title': 'Social Networks', 'type': 'LinkList', 'sectionId': 'footer-upper', 'id': 'LinkList52'}, {'title': 'Copyright', 'type': 'HTML', 'sectionId': 'footer-upper', 'id': 'HTML57'}, {'title': 'Etiquetas', 'type': 'Label', 'sectionId': 'footer-1', 'id': 'Label1'}, {'title': 'Footer links', 'type': 'PageList', 'sectionId': 'footer-lower', 'id': 'PageList52'}]}]);
_WidgetManager._RegisterWidget('_HeaderView', new _WidgetInfo('Header51', 'header', document.getElementById('Header51'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_PageListView', new _WidgetInfo('PageList51', 'header', document.getElementById('PageList51'), {'title': 'Menu', 'links': [{'isCurrentPage': false, 'href': 'https://jorgeandresamaya.blogspot.com', 'title': 'Inicio'}, {'isCurrentPage': false, 'href': '#', 'title': 'Blog'}, {'isCurrentPage': false, 'href': '', 'title': 'Etiquetas'}, {'isCurrentPage': false, 'href': 'https://jorgeandresamaya.blogspot.com/search/label/Econom%C3%ADa', 'title': '__Econom\xeda'}, {'isCurrentPage': false, 'href': 'https://jorgeandresamaya.blogspot.com/search/label/Herramientas%20Digitales', 'title': '__Herramientas Digitales'}, {'isCurrentPage': false, 'href': 'https://jorgeandresamaya.blogspot.com/search/label/Noticias', 'title': '__Noticias'}, {'isCurrentPage': false, 'href': 'https://jorgeandresamaya.blogspot.com/search/label/Redes%20Sociales', 'title': '__Redes Sociales'}, {'isCurrentPage': false, 'href': 'https://jorgeandresamaya.blogspot.com/search/label/Software', 'title': '__Software'}, {'isCurrentPage': false, 'href': '#', 'title': 'Enlaces'}], 'mobile': false, 'showPlaceholder': true, 'hasCurrentPage': false}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_PopularPostsView', new _WidgetInfo('PopularPosts51', 'header', document.getElementById('PopularPosts51'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_BlogView', new _WidgetInfo('Blog99', 'Hero', document.getElementById('Blog99'), {'cmtInteractionsEnabled': false, 'lightboxEnabled': true, 'lightboxModuleUrl': 'https://www.blogger.com/static/v1/jsbin/3475687386-lbx__es_419.js', 'lightboxCssUrl': 'https://www.blogger.com/static/v1/v-css/13464135-lightbox_bundle.css'}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_PopularPostsView', new _WidgetInfo('PopularPosts52', 'upper', document.getElementById('PopularPosts52'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_BlogView', new _WidgetInfo('Blog1', 'Content', document.getElementById('Blog1'), {'cmtInteractionsEnabled': false, 'lightboxEnabled': true, 'lightboxModuleUrl': 'https://www.blogger.com/static/v1/jsbin/3475687386-lbx__es_419.js', 'lightboxCssUrl': 'https://www.blogger.com/static/v1/v-css/13464135-lightbox_bundle.css'}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML3', 'sidebar', document.getElementById('HTML3'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML6', 'sidebar', document.getElementById('HTML6'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML4', 'sidebar', document.getElementById('HTML4'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_BlogSearchView', new _WidgetInfo('BlogSearch51', 'sidebar', document.getElementById('BlogSearch51'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_PopularPostsView', new _WidgetInfo('PopularPosts53', 'sidebar', document.getElementById('PopularPosts53'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_TextView', new _WidgetInfo('Text51', 'sidebar', document.getElementById('Text51'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML55', 'sidebar-post', document.getElementById('HTML55'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML56', 'sidebar-page', document.getElementById('HTML56'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_TextView', new _WidgetInfo('Text52', 'Filters', document.getElementById('Text52'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_TextView', new _WidgetInfo('Text53', 'Filters', document.getElementById('Text53'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_BlogSearchView', new _WidgetInfo('BlogSearch52', 'Filters', document.getElementById('BlogSearch52'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList52', 'footer-upper', document.getElementById('LinkList52'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML57', 'footer-upper', document.getElementById('HTML57'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LabelView', new _WidgetInfo('Label1', 'footer-1', document.getElementById('Label1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_PageListView', new _WidgetInfo('PageList52', 'footer-lower', document.getElementById('PageList52'), {'title': 'Footer links', 'links': [{'isCurrentPage': false, 'href': 'https://jorgeandresamaya.blogspot.com', 'title': 'Inicio'}, {'isCurrentPage': false, 'href': 'https://jorgeandresamaya.blogspot.com/p/politica-de-privacidad.html', 'id': '2307734503530916763', 'title': 'Pol\xedticas de Privacidad'}, {'isCurrentPage': false, 'href': 'https://jorgeandresamaya.blogspot.com/p/cookies.html', 'id': '6179536549233156998', 'title': 'Cookies'}], 'mobile': false, 'showPlaceholder': true, 'hasCurrentPage': false}, 'displayModeFull'));
</script>
</body>