<button type="button" class="action-oser" id="click-vlink2"> <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24"><path d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-3 18v-12l10 6-10 6z" style="fill:#fff" /></svg> </button> <div id="video-modal2" style="display:none;"> <div class="content-oser"> <iframe width="560" height="315" id="youtube2" src="https://www.youtube.com/embed/JexOJOssGwk?rel=0&enablejsapi=1&origin=https%3A%2F%2Fwww.apetito.co.uk&widgetid=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div> </div> <script> require( [ 'jquery', 'Magento_Ui/js/modal/modal' ], function( $, modal ) { var options = { type: 'popup', responsive: true, modalClass: 'nursery-modal', 'buttons': [{ class: 'action-oser' }] }; var popup = modal(options, $('#video-modal2')); $("#click-vlink2").on('click',function(){ $("#video-modal2").modal("openModal"); }); $('.action-close').on('click', function() { var video = $("#youtube2").attr("src"); $("#youtube2").attr("src",""); $("#youtube2").attr("src",video); }); } ); </script>

Agregué el script anterior para el video emergente modal. agregué este ancho = "560" altura = "315" en iframe y es el tamaño requerido para el escritorio. Pero cuando reviso los dispositivos móviles, no se ajustan al dispositivo móvil.

¿Cómo puedo hacer que esto responda también a todos los dispositivos móviles?

Cualquier ayuda puede ser apreciada. ¡Gracias!