Cómo activar el Autoplay en videos de YouTube en tu sitio web | HTML

octubre 12, 2024 0

Cómo activar el Autoplay en videos de YouTube en tu sitio web | HTML

Aprenderás a agregar la funcionalidad de reproducción automática (Autoplay) a un video de YouTube embebido en tu sitio web. Esta técnica mejora la experiencia de usuario al iniciar el contenido multimedia sin intervención.

Con solo modificar algunos parámetros en el código HTML, puedes hacer que los videos de YouTube se reproduzcan automáticamente al cargar la página. Este efecto es útil en presentaciones, portfolios, o páginas promocionales.

Este método es sencillo y solo requiere ajustes en el atributo src del iframe que contiene el video de YouTube. Asegúrate de utilizarlo en los contextos adecuados para no afectar la experiencia de los usuarios.

¿Qué aprenderás en este tutorial?

En este tutorial aprenderás a:

Embeder videos de YouTube en tu sitio web.
Habilitar la opción de Autoplay en videos utilizando HTML.
Configurar adecuadamente el atributo src del iframe para videos.

¿Qué recursos necesitarás para realizar el proyecto?

Para completar este proyecto necesitarás:

Un editor de código (como Visual Studio Code o Sublime Text).
Un video de YouTube que quieras mostrar en tu sitio web.
Conocimientos básicos de HTML.

Cómo activar el Autoplay en videos de YouTube en tu sitio web | HTML

En este tutorial te enseño cómo activar el Autoplay en videos de YouTube embebidos en tu sitio web. Si te gusta el contenido, suscríbete y activa la campanita para más tutoriales.

Código HTML:

Este es el código HTML que utilizarás para habilitar la reproducción automática del video de YouTube:

Este código incluye el parámetro autoplay=1 en el enlace del video de YouTube, lo que permite que el video se reproduzca automáticamente al cargar la página.

Vista Previa:

Aquí puedes ver cómo se reproduce automáticamente el video de YouTube embebido en el sitio web sin necesidad de hacer clic en "play".

Conclusión:

Habilitar la función de Autoplay para videos de YouTube es una excelente manera de capturar la atención de los visitantes inmediatamente. Sin embargo, debes usar esta funcionalidad de manera responsable, ya que puede afectar la experiencia de usuario si se abusa de ella.

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

<script type="text/javascript" src="https://www.blogger.com/static/v1/widgets/3878540743-widgets.js"></script>
<script type='text/javascript'>
window['__wavt'] = 'AOuZoY6uVJO-Io5xcLlu6_16wGQmeb6b6Q:1759515579968';_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d1960578344641310559','//www.sleedw.com/2024/10/como-activar-autoplay-youtube.html','1960578344641310559');
_WidgetManager._SetDataContext([{'name': 'blog', 'data': {'blogId': '1960578344641310559', 'title': 'SLee Dw', 'url': 'https://www.sleedw.com/2024/10/como-activar-autoplay-youtube.html', 'canonicalUrl': 'https://www.sleedw.com/2024/10/como-activar-autoplay-youtube.html', 'homepageUrl': 'https://www.sleedw.com/', 'searchUrl': 'https://www.sleedw.com/search', 'canonicalHomepageUrl': 'https://www.sleedw.com/', 'blogspotFaviconUrl': 'https://www.sleedw.com/favicon.ico', 'bloggerUrl': 'https://www.blogger.com', 'hasCustomDomain': true, 'httpsEnabled': true, 'enabledCommentProfileImages': true, 'gPlusViewType': 'FILTERED_POSTMOD', 'adultContent': false, 'analyticsAccountNumber': '', '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\x22SLee Dw - Atom\x22 href\x3d\x22https://www.sleedw.com/feeds/posts/default\x22 /\x3e\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/rss+xml\x22 title\x3d\x22SLee Dw - RSS\x22 href\x3d\x22https://www.sleedw.com/feeds/posts/default?alt\x3drss\x22 /\x3e\n\x3clink rel\x3d\x22service.post\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22SLee Dw - Atom\x22 href\x3d\x22https://www.blogger.com/feeds/1960578344641310559/posts/default\x22 /\x3e\n\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22SLee Dw - Atom\x22 href\x3d\x22https://www.sleedw.com/feeds/2289416111529599904/comments/default\x22 /\x3e\n', 'meTag': '', '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/00d5921fb137c39b', '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': 'X', 'key': 'twitter', 'shareMessage': 'Compartir en X', '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': 'Read more \xbb', 'pageType': 'item', 'postId': '2289416111529599904', 'postImageThumbnailUrl': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPuUIZiyGFqlAQI3FQzIMrlJ_T7lhmSihcV5fgLTee0mNVN-UkJWU8j_sFWbMVSn0CZNshw448eIdOjWi6NY77e-7nvLw9cXNOsSOFdOMiwr11RjrumlJTuot0NRlmrQlpHu24jVsJhlpO7G8qNiITCXZhiJ0SKDxEu7GkOgN1A3R8h57b72efCyGCci0/s72-c/REPRODUCCION%20AUTOMATICA%20DE%20VIDEO%20YOUTUBE.png', 'postImageUrl': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPuUIZiyGFqlAQI3FQzIMrlJ_T7lhmSihcV5fgLTee0mNVN-UkJWU8j_sFWbMVSn0CZNshw448eIdOjWi6NY77e-7nvLw9cXNOsSOFdOMiwr11RjrumlJTuot0NRlmrQlpHu24jVsJhlpO7G8qNiITCXZhiJ0SKDxEu7GkOgN1A3R8h57b72efCyGCci0/s16000/REPRODUCCION%20AUTOMATICA%20DE%20VIDEO%20YOUTUBE.png', 'pageName': 'C\xf3mo activar el Autoplay en videos de YouTube en tu sitio web | HTML', 'pageTitle': 'SLee Dw: C\xf3mo activar el Autoplay en videos de YouTube en tu sitio web | HTML', 'metaDescription': 'Aprende a activar el Autoplay en videos de YouTube embebidos en tu sitio web usando HTML. Mejora la interacci\xf3n multimedia.'}}, {'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 activar el Autoplay en videos de YouTube en tu sitio web | HTML', 'description': 'Aprende a activar el Autoplay en videos de YouTube embebidos en tu sitio web usando HTML. Mejora la interacci\xf3n multimedia.', 'featuredImage': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPuUIZiyGFqlAQI3FQzIMrlJ_T7lhmSihcV5fgLTee0mNVN-UkJWU8j_sFWbMVSn0CZNshw448eIdOjWi6NY77e-7nvLw9cXNOsSOFdOMiwr11RjrumlJTuot0NRlmrQlpHu24jVsJhlpO7G8qNiITCXZhiJ0SKDxEu7GkOgN1A3R8h57b72efCyGCci0/s16000/REPRODUCCION%20AUTOMATICA%20DE%20VIDEO%20YOUTUBE.png', 'url': 'https://www.sleedw.com/2024/10/como-activar-autoplay-youtube.html', 'type': 'item', 'isSingleItem': true, 'isMultipleItems': false, 'isError': false, 'isPage': false, 'isPost': true, 'isHomepage': false, 'isArchive': false, 'isLabelSearch': false, 'postId': 2289416111529599904}}, {'name': 'widgets', 'data': [{'title': 'SLee Dw (Encabezado)', 'type': 'Header', 'sectionId': 'header', 'id': 'Header51'}, {'title': 'Menu', 'type': 'PageList', 'sectionId': 'header', 'id': 'PageList51'}, {'title': 'Tutoriales Populares', 'type': 'PopularPosts', 'sectionId': 'header', 'id': 'PopularPosts51', 'posts': [{'title': 'C\xf3mo Hacer un Men\xfa Lateral con HTML y CSS', 'id': 7022035973837712195}, {'title': 'Cards - Tarjetas con Efecto Hover -  Html y Css', 'id': 8547414110761430268}, {'title': 'C\xf3mo Agregar Iconos Online a tu Sitio Web usando Font Awesome', 'id': 4360027024626190812}, {'title': 'Barra de Redes Sociales Flotante con HTML y CSS', 'id': 1653323812070282008}, {'title': 'Como hacer un Men\xfa Desplegable con Html y Css', 'id': 1422912332681348123}, {'title': 'Efecto Hover a una Imagen con Html y Css', 'id': 8064274890093804388}, {'title': 'C\xf3mo Crear una Ventana Modal en HTML y CSS', 'id': 5330178491384826846}, {'title': 'C\xf3mo Crear un Slider Autom\xe1tico con HTML y CSS | Sin JavaScript', 'id': 3239873037710879203}, {'title': 'C\xf3mo Crear un Banner Animado con Html y Css', 'id': 2132912634355061121}, {'title': 'C\xf3mo Crear un Efecto Hover Avanzado en HTML y CSS', 'id': 3560127906615546078}]}, {'title': 'Entradas del blog', 'type': 'Blog', 'sectionId': 'Hero', 'id': 'Blog99', 'posts': [{'id': '2289416111529599904', 'title': 'C\xf3mo activar el Autoplay en videos de YouTube en tu sitio web | HTML', 'featuredImage': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPuUIZiyGFqlAQI3FQzIMrlJ_T7lhmSihcV5fgLTee0mNVN-UkJWU8j_sFWbMVSn0CZNshw448eIdOjWi6NY77e-7nvLw9cXNOsSOFdOMiwr11RjrumlJTuot0NRlmrQlpHu24jVsJhlpO7G8qNiITCXZhiJ0SKDxEu7GkOgN1A3R8h57b72efCyGCci0/s16000/REPRODUCCION%20AUTOMATICA%20DE%20VIDEO%20YOUTUBE.png', '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': 'C\xf3mo Hacer un Men\xfa Lateral con HTML y CSS', 'id': 7022035973837712195}, {'title': 'Cards - Tarjetas con Efecto Hover -  Html y Css', 'id': 8547414110761430268}, {'title': 'C\xf3mo Agregar Iconos Online a tu Sitio Web usando Font Awesome', 'id': 4360027024626190812}, {'title': 'Barra de Redes Sociales Flotante con HTML y CSS', 'id': 1653323812070282008}, {'title': 'Como hacer un Men\xfa Desplegable con Html y Css', 'id': 1422912332681348123}, {'title': 'Efecto Hover a una Imagen con Html y Css', 'id': 8064274890093804388}, {'title': 'C\xf3mo Crear una Ventana Modal en HTML y CSS', 'id': 5330178491384826846}, {'title': 'C\xf3mo Crear un Slider Autom\xe1tico con HTML y CSS | Sin JavaScript', 'id': 3239873037710879203}, {'title': 'C\xf3mo Crear un Banner Animado con Html y Css', 'id': 2132912634355061121}, {'title': 'C\xf3mo Crear un Efecto Hover Avanzado en HTML y CSS', 'id': 3560127906615546078}]}, {'title': 'Entradas del blog', 'type': 'Blog', 'sectionId': 'Content', 'id': 'Blog1', 'posts': [{'id': '2289416111529599904', 'title': 'C\xf3mo activar el Autoplay en videos de YouTube en tu sitio web | HTML', 'featuredImage': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPuUIZiyGFqlAQI3FQzIMrlJ_T7lhmSihcV5fgLTee0mNVN-UkJWU8j_sFWbMVSn0CZNshw448eIdOjWi6NY77e-7nvLw9cXNOsSOFdOMiwr11RjrumlJTuot0NRlmrQlpHu24jVsJhlpO7G8qNiITCXZhiJ0SKDxEu7GkOgN1A3R8h57b72efCyGCci0/s16000/REPRODUCCION%20AUTOMATICA%20DE%20VIDEO%20YOUTUBE.png', 'showInlineAds': false}], 'headerByline': {'regionName': 'header1', 'items': [{'name': 'share', 'label': ''}, {'name': 'timestamp', 'label': ''}]}, 'footerBylines': [{'regionName': 'footer1', 'items': [{'name': 'comments', 'label': 'comments'}]}, {'regionName': 'footer2', 'items': [{'name': 'labels', 'label': ''}]}], 'allBylineItems': [{'name': 'share', 'label': ''}, {'name': 'timestamp', 'label': ''}, {'name': 'comments', 'label': 'comments'}, {'name': 'labels', 'label': ''}]}, {'title': 'Buscar', 'type': 'BlogSearch', 'sectionId': 'sidebar', 'id': 'BlogSearch51'}, {'title': 'Recomendados', 'type': 'FeaturedPost', 'sectionId': 'sidebar', 'id': 'FeaturedPost51', 'postId': '1422912332681348123'}, {'title': '{ title: \x22Comentarios\x22, content: \x22comments\x22 }', 'type': 'Text', 'sectionId': 'sidebar', 'id': 'Text51'}, {'title': '{ title: \x22Populares\x22, content: \x22trending\x22 }', 'type': 'PopularPosts', 'sectionId': 'sidebar', 'id': 'PopularPosts53', 'posts': [{'title': 'C\xf3mo Hacer un Men\xfa Lateral con HTML y CSS', 'id': 7022035973837712195}, {'title': 'Cards - Tarjetas con Efecto Hover -  Html y Css', 'id': 8547414110761430268}, {'title': 'C\xf3mo Agregar Iconos Online a tu Sitio Web usando Font Awesome', 'id': 4360027024626190812}, {'title': 'Barra de Redes Sociales Flotante con HTML y CSS', 'id': 1653323812070282008}, {'title': 'Como hacer un Men\xfa Desplegable con Html y Css', 'id': 1422912332681348123}]}, {'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': 'Copyright', 'type': 'HTML', 'sectionId': 'footer-upper', 'id': 'HTML57'}, {'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://www.sleedw.com/search/label/HTML%26CSS', 'title': 'HTML \x26 CSS'}], '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/2509962609-lbx__es_419.js', 'lightboxCssUrl': 'https://www.blogger.com/static/v1/v-css/828616780-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/2509962609-lbx__es_419.js', 'lightboxCssUrl': 'https://www.blogger.com/static/v1/v-css/828616780-lightbox_bundle.css'}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_BlogSearchView', new _WidgetInfo('BlogSearch51', 'sidebar', document.getElementById('BlogSearch51'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_FeaturedPostView', new _WidgetInfo('FeaturedPost51', 'sidebar', document.getElementById('FeaturedPost51'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_TextView', new _WidgetInfo('Text51', 'sidebar', document.getElementById('Text51'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_PopularPostsView', new _WidgetInfo('PopularPosts53', 'sidebar', document.getElementById('PopularPosts53'), {}, '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('_HTMLView', new _WidgetInfo('HTML57', 'footer-upper', document.getElementById('HTML57'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_PageListView', new _WidgetInfo('PageList52', 'footer-lower', document.getElementById('PageList52'), {'title': 'Footer links', 'links': [{'isCurrentPage': false, 'href': 'https://www.sleedw.com/', 'title': 'P\xe1gina Principal'}], 'mobile': false, 'showPlaceholder': true, 'hasCurrentPage': false}, 'displayModeFull'));
</script>
</body>