网页嵌入YouTube视频，如何让手机端显示移动端播放器界面？

问题根源在于YouTube的embed链接未强制触发移动端适配，Reddit正是通过URL参数启用了移动端播放器界面。你只需给embed链接添加&m=1参数，就能让手机端显示适配触摸操作的大按钮界面。

修改步骤： #

• 在iframe的src地址末尾追加&m=1，比如将原地址https://www.youtube.com/embed/NE9ZW-fxP0w?rel=0改为https://www.youtube.com/embed/NE9ZW-fxP0w?rel=0&m=1
• 移除iframe标签里冗余的width和height属性，因为父容器已通过padding-top: 56.25%实现了16:9的响应式比例，避免属性冲突
• 删掉包裹iframe的<p>标签，消除不必要的布局干扰

修改后的完整代码： #

<div>video embed</div>   
<div style="width: 100%; height: 50px;"></div>
<div style="width: 100%; min-width: 200px; max-width: 1500px; display:table; margin:0 auto;">
    <div style="position: relative; width: 100%; overflow: hidden; padding-top: 56.25%;">
        <iframe style="position: absolute; top: 0; left: 0; right: 0; width: 100%; height: 100%; border: none;" 
                src="https://www.youtube.com/embed/NE9ZW-fxP0w?rel=0&m=1" 
                allowfullscreen="allowfullscreen" 
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture">
        </iframe>
    </div>
</div>

添加&m=1参数后，YouTube会强制加载移动端优化的播放器界面，按钮尺寸会适配触摸操作，实现和Reddit一致的移动端显示效果。

内容的提问来源于stack exchange，提问作者Peterlee