{"id":261023,"date":"2022-11-04T11:22:42","date_gmt":"2022-11-04T10:22:42","guid":{"rendered":"https:\/\/divimundo.com\/blog\/3-formas-de-reproducir-video-automaticamente-en-divi-sin-complementos\/"},"modified":"2022-11-04T11:22:46","modified_gmt":"2022-11-04T10:22:46","slug":"3-formas-de-reproducir-video-automaticamente-en-divi-sin-complementos","status":"publish","type":"post","link":"https:\/\/divimundo.com\/es\/blog\/3-formas-de-reproducir-video-automaticamente-en-divi-sin-complementos\/","title":{"rendered":"3 formas de reproducir video autom\u00e1ticamente en Divi (sin complementos)"},"content":{"rendered":"<p>[et_pb_section fb_built=\u00bb1&#8243; admin_label=\u00bbsection\u00bb _builder_version=\u00bb4.16&#8243; global_colors_info=\u00bb{}\u00bb][et_pb_row admin_label=\u00bbrow\u00bb _builder_version=\u00bb4.16&#8243; background_size=\u00bbinitial\u00bb background_position=\u00bbtop_left\u00bb background_repeat=\u00bbrepeat\u00bb custom_padding=\u00bb||0px|||\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_column type=\u00bb4_4&#8243; _builder_version=\u00bb4.16&#8243; custom_padding=\u00bb|||\u00bb global_colors_info=\u00bb{}\u00bb custom_padding__hover=\u00bb|||\u00bb][et_pb_text _builder_version=\u00bb4.18.0&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb]<\/p>\n<p><strong>Para reproducir autom\u00e1ticamente videos en una p\u00e1gina web es una excelente manera de mostrar grabaciones de pantalla y videos en bucle sin usar animaciones gif granuladas y pesadas. Aqu\u00ed se explica c\u00f3mo reproducir videos autom\u00e1ticamente en Divi sin romper la pol\u00edtica de reproducci\u00f3n autom\u00e1tica de navegadores web como Chrome, Firefox y Safari.<\/strong><\/p>\n<p>[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row disabled_on=\u00bboff|off|off\u00bb _builder_version=\u00bb4.18.0&#8243; _module_preset=\u00bbdefault\u00bb custom_padding=\u00bb||0px|||\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_column type=\u00bb4_4&#8243; _builder_version=\u00bb4.16&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_video src=\u00bbhttps:\/\/youtu.be\/G_CysjQa7JE\u00bb image_src=\u00bbhttps:\/\/divimundo.com\/wp-content\/uploads\/2022\/09\/autoplay-video-in-divi-yt.jpg\u00bb _builder_version=\u00bb4.18.0&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb][\/et_pb_video][et_pb_button button_url=\u00bbhttps:\/\/www.youtube.com\/c\/divimundo?sub_confirmation=1&#8243; url_new_window=\u00bbon\u00bb button_text=\u00bbSuscr\u00edbete en YouTube\u00bb button_alignment=\u00bbcenter\u00bb _builder_version=\u00bb4.18.0&#8243; _module_preset=\u00bbdefault\u00bb custom_button=\u00bboff\u00bb background_layout=\u00bbdark\u00bb custom_margin=\u00bb||9px|||\u00bb global_module=\u00bb259694&#8243; saved_tabs=\u00bball\u00bb locked=\u00bboff\u00bb global_colors_info=\u00bb{}\u00bb custom_css_main_element_last_edited=\u00bbon|desktop\u00bb custom_css_main_element_tablet=\u00bbfont-size:10px !important;\u00bb custom_css_main_element_phone=\u00bbfont-size:10px !important;\u00bb][\/et_pb_button][et_pb_text _builder_version=\u00bb4.18.0&#8243; _module_preset=\u00bbdefault\u00bb text_font=\u00bb||||||||\u00bb text_text_color=\u00bb#595959&#8243; text_font_size=\u00bb13px\u00bb text_orientation=\u00bbcenter\u00bb global_module=\u00bb259833&#8243; saved_tabs=\u00bball\u00bb global_colors_info=\u00bb{}\u00bb]<\/p>\n<p>Join 1600+ subscribers!<\/p>\n<p>[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=\u00bb4.18.0&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_column type=\u00bb4_4&#8243; _builder_version=\u00bb4.18.0&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_text _builder_version=\u00bb4.18.0&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb]<\/p>\n<h2>Por qu\u00e9 la reproducci\u00f3n autom\u00e1tica de v\u00eddeo puede ser complicada<\/h2>\n<p>Google Chrome decidi\u00f3 <a href=\"https:\/\/developer.chrome.com\/blog\/autoplay\/\" target=\"_blank\" rel=\"noopener\">bloquear los videos reproducidos autom\u00e1ticamente<\/a> en abril de 2018. De hecho, casi todos los principales navegadores web tienen la misma pol\u00edtica estricta sobre la reproducci\u00f3n autom\u00e1tica. Google Chrome resume las razones detr\u00e1s de esto:<\/p>\n<blockquote>\n<p><em>Experiencia de usuario mejorada, incentivos minimizados para instalar bloqueadores de anuncios y consumo de datos reducido.<\/em><\/p>\n<\/blockquote>\n<p>Sin embargo, no hay reglas sin expectativas. La pol\u00edtica de Google Chrome establece:<\/p>\n<p><strong><em>\u00abLas pol\u00edticas de reproducci\u00f3n autom\u00e1tica de Chrome son simples:<\/em><\/strong><\/p>\n<ul>\n<li><em><span style=\"background: #E4FC5B; padding: 3px;\">Siempre se permite la reproducci\u00f3n autom\u00e1tica silenciada.<\/span><\/em><\/li>\n<li><em>Se permite la reproducci\u00f3n autom\u00e1tica con sonido si:<\/em><\/li>\n<li style=\"margin-left: 40px;\"><em>El usuario ha interactuado con el dominio (clic, toque, etc.).<\/em><\/li>\n<li style=\"margin-left: 40px;\"><em>En el escritorio, se ha cruzado el umbral del \u00edndice de participaci\u00f3n en medios del usuario, lo que significa que el usuario ha reproducido previamente v\u00eddeo con sonido.<\/em><\/li>\n<li style=\"margin-left: 40px;\"><em>El usuario ha agregado el sitio a su pantalla de inicio en el m\u00f3vil o ha instalado la PWA en el escritorio.<\/em><\/li>\n<li><em>Los fotogramas superiores pueden delegar el permiso de reproducci\u00f3n autom\u00e1tica a sus iframes para permitir la reproducci\u00f3n autom\u00e1tica con sonido.<\/em><\/li>\n<\/ul>\n<p>En este tutorial, vamos a usar el m\u00f3dulo de video Divi, <strong>silenciar el video de forma predeterminada<\/strong> y habilitar la reproducci\u00f3n autom\u00e1tica. De esta manera, el video comenzar\u00e1 a reproducirse autom\u00e1ticamente sin ser pausado por el navegador. \u00a1Vamos!<\/p>\n<p>[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row custom_padding_last_edited=\u00bbon|desktop\u00bb disabled_on=\u00bboff|off|off\u00bb _builder_version=\u00bb4.18.0&#8243; _module_preset=\u00bbdefault\u00bb background_color=\u00bb#eef6f8&#8243; custom_padding=\u00bb40px|40px|40px|40px|true|true\u00bb custom_padding_tablet=\u00bb30px|30px|30px|30px|true|true\u00bb custom_padding_phone=\u00bb20px|20px|20px|20px|true|true\u00bb border_radii=\u00bbon|5px|5px|5px|5px\u00bb global_colors_info=\u00bb{%22gcid-66d98c2e-3ef6-412b-9fec-faff41026a40%22:%91%22background_color%22%93}\u00bb][et_pb_column type=\u00bb4_4&#8243; _builder_version=\u00bb4.16&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_blurb title=\u00bbLa reproducci\u00f3n autom\u00e1tica no funciona para videos de Vimeo y videos de YouTube\u00bb use_icon=\u00bbon\u00bb font_icon=\u00bb&#xf0f3;||fa||900&#8243; icon_color=\u00bbgcid-66d9912f-e1e7-4c20-bfa6-583931bfe6f3&#8243; image_icon_background_color=\u00bbRGBA(255,255,255,0)\u00bb icon_placement=\u00bbleft\u00bb content_max_width=\u00bb100%\u00bb icon_placement_tablet=\u00bbleft\u00bb icon_placement_phone=\u00bbtop\u00bb icon_placement_last_edited=\u00bbon|phone\u00bb image_icon_width_tablet=\u00bb\u00bb image_icon_width_phone=\u00bb36px\u00bb image_icon_width_last_edited=\u00bbon|phone\u00bb _builder_version=\u00bb4.18.0&#8243; _module_preset=\u00bbdefault\u00bb custom_padding=\u00bb||||false|false\u00bb hover_enabled=\u00bb0&#8243; global_colors_info=\u00bb{%22gcid-66d9912f-e1e7-4c20-bfa6-583931bfe6f3%22:%91%22icon_color%22%93}\u00bb custom_css_blurb_image_last_edited=\u00bbon|phone\u00bb custom_css_blurb_image_phone=\u00bbmargin-bottom:16px;\u00bb sticky_enabled=\u00bb0&#8243;]<\/p>\n<p>Este m\u00e9todo solo funciona para archivos de videos autohospedados, por ejemplo, videos mp4 y mov, que carga en su biblioteca multimedia (u otro servidor). No he encontrado un m\u00e9todo s\u00f3lido para reproducir autom\u00e1ticamente videos de YouTube o videos de Vimeo. Si conoces uno, por favor h\u00e1zmelo saber <a href=\"#comments\">en los comentarios a continuaci\u00f3n<\/a>.<\/p>\n<p>[\/et_pb_blurb][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=\u00bb4.18.0&#8243; _module_preset=\u00bbdefault\u00bb custom_padding=\u00bb||0px|||\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_column type=\u00bb4_4&#8243; _builder_version=\u00bb4.18.0&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_text _builder_version=\u00bb4.18.0&#8243; _module_preset=\u00bbdefault\u00bb custom_margin=\u00bb||6px||false|false\u00bb custom_padding=\u00bb||||false|false\u00bb global_colors_info=\u00bb{}\u00bb]<\/p>\n<h2>M\u00e9todo 1: reproducci\u00f3n autom\u00e1tica de v\u00eddeo y botones de control de pantalla al pasar el cursor<\/h2>\n<p>[\/et_pb_text][et_pb_video src=\u00bbhttps:\/\/divimundo.com\/wp-content\/uploads\/2022\/09\/divimundo-video.mp4&#8243; module_class=\u00bbdm-autoplay-btn\u00bb _builder_version=\u00bb4.18.0&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb][\/et_pb_video][et_pb_text _builder_version=\u00bb4.18.0&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb]<\/p>\n<p><strong>Demostraci\u00f3n en vivo:<\/strong> El v\u00eddeo comienza a reproducirse autom\u00e1ticamente. Desplace el video para usar los controles de video para reproducir, pausar, desplazarse por la l\u00ednea de tiempo, reactivar, silenciar, controlar el volumen, ver a pantalla completa y m\u00e1s opciones.<\/p>\n<p>[\/et_pb_text][et_pb_text _builder_version=\u00bb4.18.0&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb]<\/p>\n<ol>\n<li>Vaya a <strong>Divi<\/strong> \u00bb <strong>Opciones de tema<\/strong> \u00bb <strong>Integraci\u00f3n<\/strong> y pegue el c\u00f3digo a continuaci\u00f3n en el segundo campo: <strong>Agregar c\u00f3digo al &lt; cuerpo &gt;<\/strong> y haga clic en <strong>Guardar cambios<\/strong>.\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">&lt;script&gt;\njQuery(document).ready(function($) {\nif ($('.dm-autoplay-btn .et_pb_video_box').length !== 0) {\n$('.dm-autoplay-btn .et_pb_video_box').find('video').prop('muted', true);\n$(\".dm-autoplay-btn .et_pb_video_box\").find('video').attr('loop', 'loop');\n$(\".dm-autoplay-btn .et_pb_video_box\").find('video').attr('playsInline', '');\n$(\".dm-autoplay-btn .et_pb_video_box\").each(function() {\n$(this).find('video').get(0).play();\n});\n}\n});\n&lt;\/script&gt;<\/pre>\n<p><strong>Consejo profesional:<\/strong> Si no desea que el script se lea en todas las p\u00e1ginas (por razones de velocidad de p\u00e1gina), un m\u00e9todo alternativo es agregar el c\u00f3digo en un <strong>m\u00f3dulo de c\u00f3digo Divi<\/strong> en las publicaciones y p\u00e1ginas espec\u00edficas donde desea usar la reproducci\u00f3n autom\u00e1tica.<\/p>\n<\/li>\n<li style=\"margin-top: 4px;\">Vaya a la p\u00e1gina o publicaci\u00f3n donde desea incrustar el video de reproducci\u00f3n autom\u00e1tica y habilite el <strong>Divi Visual Builder<\/strong>.<\/li>\n<li>Inserte un <strong>m\u00f3dulo<\/strong> de video, coloque el video predeterminado de Divi YouTube en la <strong>pesta\u00f1a Contenido<\/strong> y haga clic en el icono de la <strong>papelera<\/strong> para eliminarlo.<\/li>\n<li>Haga clic en Agregar video y elija un <strong>video<\/strong> existente de su biblioteca multimedia de WordPress o cargue uno nuevo. Los formatos mp4 y mov funcionan bien. Salvar.<\/li>\n<li>Dir\u00edgete a <strong>Advanced <\/strong>\u00bb <strong>CSS ID &amp; Classes<\/strong> en el <strong>m\u00f3dulo de video<\/strong> y agrega la <strong>clase CSS<\/strong> <em>dm-autoplay-btn<\/em><\/li>\n<\/ol>\n<p><strong>Guarde sus cambios<\/strong> y obtenga una vista previa en el frontend. La reproducci\u00f3n autom\u00e1tica solo funciona en frontend, no en Visual Builder. Borre la memoria cach\u00e9 del navegador y la cach\u00e9 del sitio web si no puede ver la reproducci\u00f3n autom\u00e1tica.<\/p>\n<p>[\/et_pb_text][et_pb_code _builder_version=\u00bb4.18.0&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb]<script><!-- [et_pb_line_break_holder] -->jQuery(document).ready(function($) {<!-- [et_pb_line_break_holder] -->if ($('.dm-autoplay-btn .et_pb_video_box').length !== 0) {<!-- [et_pb_line_break_holder] -->$('.dm-autoplay-btn .et_pb_video_box').find('video').prop('muted', true);<!-- [et_pb_line_break_holder] -->$(\".dm-autoplay-btn .et_pb_video_box\").find('video').attr('loop', 'loop');<!-- [et_pb_line_break_holder] -->$(\".dm-autoplay-btn .et_pb_video_box\").find('video').attr('playsInline', '');<!-- [et_pb_line_break_holder] -->$(\".dm-autoplay-btn .et_pb_video_box\").each(function() {<!-- [et_pb_line_break_holder] -->$(this).find('video').get(0).play();<!-- [et_pb_line_break_holder] -->});<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->});<!-- [et_pb_line_break_holder] --><\/script><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><script><!-- [et_pb_line_break_holder] -->jQuery(document).ready(function($) {<!-- [et_pb_line_break_holder] -->if ($('.dm-autoplay-click .et_pb_video_box').length !== 0) {<!-- [et_pb_line_break_holder] -->$('.dm-autoplay-click .et_pb_video_box').find('video').prop('muted', true);<!-- [et_pb_line_break_holder] -->$(\".dm-autoplay-click .et_pb_video_box\").find('video').attr('loop', 'loop');<!-- [et_pb_line_break_holder] -->$(\".dm-autoplay-click .et_pb_video_box\").find('video').attr('playsInline', '');<!-- [et_pb_line_break_holder] -->$(\".dm-autoplay-click .et_pb_video_box\").each(function() {<!-- [et_pb_line_break_holder] -->$(this).find('video').get(0).play();<!-- [et_pb_line_break_holder] -->});<!-- [et_pb_line_break_holder] -->$('.dm-autoplay-click .et_pb_video_box').find('video').removeAttr('controls');<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->$('.dm-autoplay-click' ).on( 'click', function() {<!-- [et_pb_line_break_holder] -->var $video = $( this ).find( 'video' );<!-- [et_pb_line_break_holder] -->var muted = $video.prop( 'muted' );<!-- [et_pb_line_break_holder] -->$video.prop('muted', muted = !muted );<!-- [et_pb_line_break_holder] -->});<!-- [et_pb_line_break_holder] -->});<!-- [et_pb_line_break_holder] --><\/script>[\/et_pb_code][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=\u00bb4.18.0&#8243; _module_preset=\u00bbdefault\u00bb custom_padding=\u00bb||2px|||\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_column type=\u00bb4_4&#8243; _builder_version=\u00bb4.18.0&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_text _builder_version=\u00bb4.18.0&#8243; _module_preset=\u00bbdefault\u00bb custom_margin=\u00bb||6px||false|false\u00bb custom_padding=\u00bb||||false|false\u00bb global_colors_info=\u00bb{}\u00bb]<\/p>\n<h2>M\u00e9todo 2: reproducci\u00f3n autom\u00e1tica de v\u00eddeo y ocultar todos los botones de control<\/h2>\n<p>[\/et_pb_text][et_pb_video src=\u00bbhttps:\/\/divimundo.com\/wp-content\/uploads\/2022\/09\/divimundo-video.mp4&#8243; module_class=\u00bbvideo-autoplay\u00bb _builder_version=\u00bb4.18.0&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb][\/et_pb_video][et_pb_text _builder_version=\u00bb4.18.0&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb]<\/p>\n<p><strong>Demostraci\u00f3n en vivo:<\/strong> El video comienza a reproducirse autom\u00e1ticamente y todos los botones de control de video est\u00e1n ocultos tanto en reposo como en el desplazamiento. Este es el mismo estilo que <a href=\"https:\/\/www.elegantthemes.com\/affiliates\/idevaffiliate.php?id=40598\" target=\"_blank\" rel=\"noopener\">Elegant Themes usa en su p\u00e1gina de inicio<\/a> para mostrar la interfaz de usuario de Divi Visual Builder.<\/p>\n<p>[\/et_pb_text][et_pb_text _builder_version=\u00bb4.18.0&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb]<\/p>\n<ol>\n<li>Vaya a <strong>Divi<\/strong> \u00bb <strong>Opciones de tema<\/strong> \u00bb <strong>Integraci\u00f3n<\/strong> y pegue el c\u00f3digo a continuaci\u00f3n en el segundo campo: <strong>Agregar c\u00f3digo al &lt; cuerpo &gt;<\/strong> y haga clic en <strong>Guardar cambios<\/strong>.\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">&lt;script&gt;\njQuery(document).ready(function($) {\nif ($('.dm-autoplay .et_pb_video_box').length !== 0) {\n$('.dm-autoplay .et_pb_video_box').find('video').prop('muted', true);\n$(\".dm-autoplay .et_pb_video_box\").find('video').attr('loop', 'loop');\n$(\".dm-autoplay .et_pb_video_box\").find('video').attr('playsInline', '');\n$(\".dm-autoplay .et_pb_video_box\").each(function() {\n$(this).find('video').get(0).play();\n});\n$('.dm-autoplay .et_pb_video_box').find('video').removeAttr('controls');\n}\n});\n&lt;\/script&gt;<\/pre>\n<p><strong>Consejo profesional:<\/strong> Si no desea que el script se lea en todas las p\u00e1ginas (por razones de velocidad de p\u00e1gina), un m\u00e9todo alternativo es agregar el c\u00f3digo en un <strong>m\u00f3dulo de c\u00f3digo Divi<\/strong> en las publicaciones y p\u00e1ginas espec\u00edficas donde desea usar la reproducci\u00f3n autom\u00e1tica.<\/p>\n<\/li>\n<li style=\"margin-top: 4px;\">Vaya a la p\u00e1gina o publicaci\u00f3n donde desea incrustar el video de reproducci\u00f3n autom\u00e1tica y habilite el <strong>Divi Visual Builder<\/strong>.<\/li>\n<li>Inserte un <strong>m\u00f3dulo<\/strong> de video, coloque el video predeterminado de Divi YouTube en la <strong>pesta\u00f1a Contenido<\/strong> y haga clic en el icono de la <strong>papelera<\/strong> para eliminarlo.<\/li>\n<li>Haga clic en Agregar video y elija un <strong>video<\/strong> existente de su biblioteca multimedia de WordPress o cargue uno nuevo. Los formatos mp4 y mov funcionan bien. Salvar.<\/li>\n<li>Dir\u00edgete a <strong>Advanced <\/strong>\u00bb <strong>CSS ID &amp; Classes<\/strong> en el <strong>m\u00f3dulo de video<\/strong> y agrega la <strong>clase CSS<\/strong> <em>dm-autoplay<\/em><\/li>\n<\/ol>\n<p><strong>Guarde sus cambios<\/strong> y obtenga una vista previa en el frontend. La reproducci\u00f3n autom\u00e1tica solo funciona en frontend, no en Visual Builder. Borre la memoria cach\u00e9 del navegador y la cach\u00e9 del sitio web si no puede ver la reproducci\u00f3n autom\u00e1tica.<\/p>\n<p>[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=\u00bb4.18.0&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_column type=\u00bb4_4&#8243; _builder_version=\u00bb4.18.0&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_text _builder_version=\u00bb4.18.0&#8243; _module_preset=\u00bbdefault\u00bb custom_margin=\u00bb||6px||false|false\u00bb custom_padding=\u00bb||||false|false\u00bb global_colors_info=\u00bb{}\u00bb]<\/p>\n<h2>M\u00e9todo 3: reproducci\u00f3n autom\u00e1tica de v\u00eddeo y agregar reactivar el sonido al hacer clic<\/h2>\n<p>[\/et_pb_text][et_pb_video src=\u00bbhttps:\/\/divimundo.com\/wp-content\/uploads\/2022\/09\/divimundo-video.mp4&#8243; module_class=\u00bbdm-autoplay-click\u00bb _builder_version=\u00bb4.18.0&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb][\/et_pb_video][et_pb_text _builder_version=\u00bb4.18.0&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb]<\/p>\n<p><strong>Demostraci\u00f3n en vivo:<\/strong> El video comienza a reproducirse autom\u00e1ticamente y todos los botones de control de video est\u00e1n ocultos tanto en reposo como en el desplazamiento. Si el usuario hace clic en cualquier parte del fotograma de v\u00eddeo, el sonido se desactivar\u00e1 y comenzar\u00e1 a reproducirse.<\/p>\n<p>[\/et_pb_text][et_pb_text _builder_version=\u00bb4.18.0&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb]<\/p>\n<ol>\n<li>Vaya a <strong>Divi<\/strong> \u00bb <strong>Opciones de tema<\/strong> \u00bb <strong>Integraci\u00f3n<\/strong> y pegue el c\u00f3digo a continuaci\u00f3n en el segundo campo: <strong>Agregar c\u00f3digo al &lt; cuerpo &gt;<\/strong> y haga clic en <strong>Guardar cambios<\/strong>.\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">&lt;script&gt;\njQuery(document).ready(function($) {\nif ($('.dm-autoplay-click .et_pb_video_box').length !== 0) {\n$('.dm-autoplay-click .et_pb_video_box').find('video').prop('muted', true);\n$(\".dm-autoplay-click .et_pb_video_box\").find('video').attr('loop', 'loop');\n$(\".dm-autoplay-click .et_pb_video_box\").find('video').attr('playsInline', '');\n$(\".dm-autoplay-click .et_pb_video_box\").each(function() {\n$(this).find('video').get(0).play();\n});\n$('.dm-autoplay-click .et_pb_video_box').find('video').removeAttr('controls');\n}\n$('.dm-autoplay-click' ).on( 'click', function() {\nvar $video = $( this ).find( 'video' );\nvar muted = $video.prop( 'muted' );\n$video.prop('muted', muted = !muted );\n});\n});\n&lt;\/script&gt;<\/pre>\n<p><strong>Consejo profesional:<\/strong> Si no desea que el script se lea en todas las p\u00e1ginas (por razones de velocidad de p\u00e1gina), un m\u00e9todo alternativo es agregar el c\u00f3digo en un <strong>m\u00f3dulo de c\u00f3digo Divi<\/strong> en las publicaciones y p\u00e1ginas espec\u00edficas donde desea usar la reproducci\u00f3n autom\u00e1tica.<\/p>\n<\/li>\n<li style=\"margin-top: 4px;\">Vaya a la p\u00e1gina o publicaci\u00f3n donde desea incrustar el video de reproducci\u00f3n autom\u00e1tica y habilite el <strong>Divi Visual Builder<\/strong>.<\/li>\n<li>Inserte un <strong>m\u00f3dulo<\/strong> de video, coloque el video predeterminado de Divi YouTube en la <strong>pesta\u00f1a Contenido<\/strong> y haga clic en el icono de la <strong>papelera<\/strong> para eliminarlo.<\/li>\n<li>Haga clic en Agregar video y elija un <strong>video<\/strong> existente de su biblioteca multimedia de WordPress o cargue uno nuevo. Los formatos mp4 y mov funcionan bien. Salvar.<\/li>\n<li>Dir\u00edgete a <strong>Advanced <\/strong>\u00bb <strong>CSS ID &amp; Classes<\/strong> en el <strong>m\u00f3dulo de video<\/strong> y agrega la <strong>clase CSS<\/strong> <em>dm-autoplay-click<\/em><\/li>\n<\/ol>\n<p><strong>Guarde sus cambios<\/strong> y obtenga una vista previa en el frontend. La reproducci\u00f3n autom\u00e1tica solo funciona en frontend, no en Visual Builder. Borre la memoria cach\u00e9 del navegador y la cach\u00e9 del sitio web si no puede ver la reproducci\u00f3n autom\u00e1tica.<\/p>\n<p>[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=\u00bb4.18.0&#8243; _module_preset=\u00bbdefault\u00bb custom_padding=\u00bb0px||0px|||\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_column type=\u00bb4_4&#8243; _builder_version=\u00bb4.18.0&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_text _builder_version=\u00bb4.18.0&#8243; _module_preset=\u00bbdefault\u00bb custom_margin=\u00bb||6px||false|false\u00bb custom_padding=\u00bb||||false|false\u00bb global_colors_info=\u00bb{}\u00bb]<\/p>\n<h2>Bono: agregue un cursor de mouse personalizado para reactivar el audio al hacer clic \ufe0f<\/h2>\n<p>[\/et_pb_text][et_pb_video src=\u00bbhttps:\/\/divimundo.com\/wp-content\/uploads\/2022\/09\/divimundo-video.mp4&#8243; module_class=\u00bbdm-autoplay-click video-cursor\u00bb _builder_version=\u00bb4.18.0&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb][\/et_pb_video][et_pb_text _builder_version=\u00bb4.18.0&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb]<\/p>\n<p><strong>Demostraci\u00f3n en vivo:<\/strong> \u00a1Seamos creativos! El video comienza a reproducirse autom\u00e1ticamente y todos los botones de control de video est\u00e1n ocultos tanto en reposo como en el desplazamiento. Si el usuario coloca el <strong>cursor del rat\u00f3n de imagen personalizado<\/strong> y el v\u00eddeo se desactivar\u00e1 si el usuario hace clic en cualquier parte del fotograma de v\u00eddeo.<\/p>\n<p>[\/et_pb_text][et_pb_text _builder_version=\u00bb4.18.0&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb]<\/p>\n<ol>\n<li>Utilice exactamente el mismo c\u00f3digo que en el m\u00e9todo 4 anterior.<\/li>\n<li>Cargue un icono de cursor de mouse personalizado en su <strong>biblioteca multimedia de WordPress<\/strong>. Lea nuestra publicaci\u00f3n <a href=\"https:\/\/divimundo.com\/blog\/use-images-as-mouse-cursors\/\" target=\"_blank\" rel=\"noopener\">de blog C\u00f3mo usar im\u00e1genes como cursores del mouse<\/a> para obtener especificaciones sobre formatos y m\u00e1s.<\/li>\n<li>Vaya a <strong>Divi<\/strong> \u00bb <strong>Personalizador de temas<\/strong> \u00bb <strong>CSS adicional<\/strong> y agregue este fragmento:\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">.dm-autoplay-click {\ncursor: url('\/my-folder\/my-cursor.png'), auto;\n}<\/pre>\n<\/li>\n<li>Reemplace \/<em>my-folder\/my-cursor.png<\/em> por la URL del archivo de imagen del cursor del rat\u00f3n.<\/li>\n<\/ol>\n<p><strong>Guarde sus cambios<\/strong> y obtenga una vista previa en el frontend. La reproducci\u00f3n autom\u00e1tica solo funciona en frontend, no en Visual Builder. Borre la memoria cach\u00e9 del navegador y la cach\u00e9 del sitio web si no puede ver la reproducci\u00f3n autom\u00e1tica.<\/p>\n<p>[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=\u00bb4.18.0&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_column type=\u00bb4_4&#8243; _builder_version=\u00bb4.18.0&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_text _builder_version=\u00bb4.18.0&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb]<\/p>\n<h2>\u00a1Eso es todo por hoy!<\/h2>\n<p>Espero que hayas disfrutado de este post. <a href=\"https:\/\/www.youtube.com\/c\/divimundo?sub_confirmation=1\" target=\"_blank\" rel=\"noopener\">Suscr\u00edbete a DiviMundo en YouTube<\/a> y <a href=\"https:\/\/www.facebook.com\/groups\/divimundo\" target=\"_blank\" rel=\"noopener\">\u00fanete a nuestro grupo de Facebook<\/a> para obtener contenido m\u00e1s n\u00edtido sobre WordPress y dise\u00f1o web.<\/p>\n<p><strong>\ud83d\udc49 Post relacionado:<\/strong> <a href=\"https:\/\/divimundo.com\/blog\/how-to-create-stunning-divi-mobile-menus-with-divi-toolbox\/\">C\u00f3mo crear impresionantes men\u00fas m\u00f3viles con Divi Toolbox<\/a><\/p>\n<p><strong>\ud83d\udc49 Curso gratuito:<\/strong> <a href=\"https:\/\/divimundo.com\/blog\/free-course-how-to-build-a-wordpress-divi-website-2021\/\">Crear un sitio web desde cero con Divi<\/a><\/p>\n<p>[\/et_pb_text][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Para reproducir autom\u00e1ticamente videos en una p\u00e1gina web es una excelente manera de mostrar grabaciones de pantalla y videos en bucle sin usar animaciones gif granuladas y pesadas.<\/p>\n","protected":false},"author":1,"featured_media":260091,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[238,352],"tags":[],"class_list":["post-261023","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-divi-2","category-tutoriales"],"_links":{"self":[{"href":"https:\/\/divimundo.com\/es\/wp-json\/wp\/v2\/posts\/261023","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/divimundo.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/divimundo.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/divimundo.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/divimundo.com\/es\/wp-json\/wp\/v2\/comments?post=261023"}],"version-history":[{"count":0,"href":"https:\/\/divimundo.com\/es\/wp-json\/wp\/v2\/posts\/261023\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/divimundo.com\/es\/wp-json\/wp\/v2\/media\/260091"}],"wp:attachment":[{"href":"https:\/\/divimundo.com\/es\/wp-json\/wp\/v2\/media?parent=261023"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/divimundo.com\/es\/wp-json\/wp\/v2\/categories?post=261023"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/divimundo.com\/es\/wp-json\/wp\/v2\/tags?post=261023"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}