Question 6414 in Magento Question posted in
The official documentation can be found here.

How to make popup video responsive respective to mobile device – Magento

<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>

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!

Tags:

2

Answers


  1. 0

    add a style="" attribute in the <iframe>

    with this css code max-width: 100%;

    enter image description here

    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%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>

    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

    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search