How to make popup video responsive respective to mobile device-CodePudding

<button type="button"  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 >
        <iframe width="560" height="315" id="youtube2" src="https://www.youtube.com/embed/JexOJOssGwk?rel=0&enablejsapi=1&origin=https://www.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>

I added above script for modal popup video. i added this width="560" height="315" in iframe and it is required size for desktop. But when i'm checking in the mobile devices its not fit according to the mobile device.

How can i make this responsive to the all mobile devices also.

Any help can be appreciated. Thanks!

CodePudding user response：

add a

this means that the video iframe in mobile always takes less than the width of the device.

and also the height remain the same, so the content below can be visible.

<iframe style="max-width: 100%;" width="560" height="315" id="youtube2" src="https://www.youtube.com/embed/JexOJOssGwk?rel=0&enablejsapi=1&origin=https://www.apetito.co.uk&widgetid=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

useful documentations:
- max-width: https://developer.mozilla.org/en-US/docs/Web/CSS/max-width
- style attribute: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/style

CodePudding user response：

i guess this can help you.

@media screen and (max-width: 750px) {
   iframe {
        max-width: 100% !important;
        width: auto !important;
       height: auto !important;
   }
}

and for more solution example visit : https://www.h3xed.com/web-development/how-to-make-a-responsive-100-width-youtube-iframe-embed