<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://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>
我為模態彈出視頻添加了上面的腳本。我在 iframe 中添加了這個 width="560" height="315" ，它是桌面所需的尺寸。但是當我檢查移動設備時，它不適合移動設備。
我怎樣才能使它也回應所有移動設備。
任何幫助都將不勝感激。謝謝！
uj5u.com熱心網友回復：
在中添加一個
這意味著移動設備中的視頻 iframe 總是小于設備的寬度。
并且高度保持不變，因此可以看到下面的內容。
<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>有用的檔案：
-max-width: https://developer.mozilla.org/en-US/docs/Web/CSS/max-width
-style attribute: https://developer.mozilla.org/en-US/docs/Web/HTML/全域屬性/樣式
uj5u.com熱心網友回復：
我想這可以幫助你。
@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
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/516750.html