原始碼來源網站: http://embedresponsively.com/
下面的嵌入碼可以自動在手機縮放,但不能自動播放(紅色為你的youtube影片ID)
<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='https://www.youtube.com/embed/aVmZpcrQBU4?rel=0' frameborder='0' allowfullscreen></iframe></div>
下面的嵌入碼 (紅色為你的youtube影片ID) 可以自動在手機縮放,而且還可以在電腦上自動播放(手機不能自動播放),而且還可以一直循環播放,片尾就不會出現同業的影片了!!
<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='https://www.youtube.com/embed/aVmZpcrQBU4?rel=0&hd=1&autoplay=1&loop=1&playlist=aVmZpcrQBU4' frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div>
google表單自動縮放的語法
<div style="position: relative; padding-bottom:56.25%; width:100%; height:0;">
<iframe src="https://docs.google.com/forms/d/e/1FAIpQLSeBfgZeN5gplpiUpauNkzndTBiof6LBG0DxRis_dKSF7L5p4Q/viewform" frameborder="0" style="position:absolute; top:0; left:0; width:100%; height:100%;" allowfullscreen></iframe>
</div>
如下範例,用手機看也會自動縮小,不會超出手機畫面寬度
<div style="position: relative; padding-bottom:56.25%; width:100%; height:0;">
<iframe src="https://docs.google.com/forms/d/e/1FAIpQLSeBfgZeN5gplpiUpauNkzndTBiof6LBG0DxRis_dKSF7L5p4Q/viewform" frameborder="0" style="position:absolute; top:0; left:0; width:100%; height:100%;" allowfullscreen></iframe>
</div>
如下範例,用手機看也會自動縮小,不會超出手機畫面寬度