在上传商品描述中的视频时，有时需要实现 PC 端和移动端全屏铺满展示并自适应适配的功能。您可参考本文中的代码进行设置，避免因手动修改视频宽高而导致的拉伸、变形或显示过窄问题。
注意
该代码适用于目前店匠已上架的主题。在使用过程中，如遇前端显示异常，可能是添加的代码与您的主题版本不适配，或者与您添加的其他代码相互冲突。请即刻删除相关代码，或与您的技术团队取得联系以获取进一步的协助与支持。
操作步骤
1. 登录您的 Shoplazza 管理后台，点击商品 > 商品管理 > 需要更改的商品，点击编辑按钮进入商品编辑页面。
2. 进入商品编辑页面后，在商品描述模块点击【源代码】，即可查看源代码信息。
3. 在视频的源代码中找到对应的视频地址并复制，以备后续使用。
4. 将视频的源代码替换为下方提供的代码：
<p style="width:100%;aspect-ratio:16 / 9;">
<iframe
src="https://iframe.videodelivery.net/你的视频地址"
style="display:block;width:100%;height:100%;border:none;"
allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;"
allowfullscreen="allowfullscreen">
</iframe>
</p>
5. 将复制备用的视频地址粘贴到【 src = "】的后方，点击保存。
注意
1. 请确保只替换视频地址，勿删除任何属性。
2. 保存后建议同时在 PC 端和移动端预览，确认展示效果正常。
6. 预览效果：
- PC 端：
- 移动端：
常见问题
1. 提供的代码中aspect-ratio: 16 / 9是否能进行修改？
A ：可以。如您的视频不是 16 : 9 比例，可根据视频的实际比例调整。常见的比例：
- 4 / 3
- 1 / 1
- 9 / 16
如您不确定视频比例，建议优先使用 16 / 9，这是最常见的视频展示比例。
2. 是否可以不使用代码，直接修改视频源代码的 width 和 height？
A ：可以，但直接修改 width 和 height仅能适配某一屏幕尺寸，无法同时兼顾 PC 和移动端，易出现视频过窄、溢出或比例失真的问题。
评论
请登录写评论。