• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
    • Questions
    • Teachers
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

202
Views
Youtube iframe alternar silenciar/no silenciar con controles personalizados/en la carga de la página

¿Cómo alternar silenciar/activar el sonido al cargar o en un botón personalizado, haga clic en un video de YouTube agregado a través de iframe?

Necesito reproducir automáticamente un video de YouTube con sonido al cargar la página.

Aquí está el iframe:

 <div class="video-container"> <iframe id="player" class="video" src="https://www.youtube.com/embed/'.$vid_id.'?autoplay=1&controls=0&loop=1&mute=1&playlist='.$vid_id.'" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div>

Encontré el fragmento a continuación en este enlace https://yootheme.com/support/question/113708

Agregué iframe_api a la página <script src="https://www.youtube.com/iframe_api"></script>

Luego usé la siguiente función para la configuración del reproductor:

 jQuery(function(){jQuery('.video-container iframe').attr('id', 'player');}); var player; function onYouTubeIframeAPIReady() { player = new YT.Player('player', { events: { 'onStateChange': onPlayerStateChange } }); } function onPlayerStateChange() { player.unMute(); player.setVolume(80); }
 <div class="video-play-btn"></div>

Guión del botón de reproducción

 $('.video-play-btn').on('click', function() { var mute_toggle = $(this); if(player.isMuted()){ player.unMute(); mute_toggle.text('volume_up'); } else{ player.mute(); mute_toggle.text('volume_off'); } });

Y no se muestran errores de consola. ¿Quizás también debería eliminar el silencio = 1?

almost 3 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error