如何使弹出视频响应于移动设备答案

【问题标题】：How to make popup video responsive respective to mobile device如何使弹出视频响应于移动设备
【发布时间】：2022-07-06 21:56:28
【问题描述】：

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

我为模态弹出视频添加了上述脚本。我在 iframe 中添加了这个 width="560" height="315" ，它是桌面所需的尺寸。但是当我检查移动设备时，它不适合移动设备。

我怎样才能使它也响应所有移动设备。

任何帮助都可以得到赞赏。谢谢！

【问题讨论】：

标签： javascript html jquery css magento

【解决方案1】：

我想这对你有帮助。

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

有关更多解决方案示例，请访问： https://www.h3xed.com/web-development/how-to-make-a-responsive-100-width-youtube-iframe-embed

【讨论】：

【解决方案2】：

在<iframe> 中添加style="" 属性

用这个css代码max-width: 100%;

这意味着移动设备中的视频 iframe 始终占用小于设备的宽度。

而且高度保持不变，所以下面的内容是可见的。

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

【讨论】：