WordPress嵌入youtube视频,给PC端和手机端分别设置尺寸

Viewed 9

在嵌入youtube之类视频代码之外添加一个div模块,以根据代码对pc端和手机端进行定制。

1 Answers

给PC端和手机端分别设置css,通过 @media screen and (max-width:800px)屏幕尺寸区分。
示例代码如下:

<style type="text/css">        
    .container-fluid-video {
    width: 50%;
    height: 100%;
    margin-right: auto;
    margin-left: auto;
}
     @media screen and (max-width:800px){.container-fluid-video{ width:100%; height:70%;}}       
</style>
<div class="container-fluid-video">
<iframe title="Yuli Company Overview" width="800px" height="430px"
src="https://www.youtube.com/embed/DPmi3jKUa1s?feature=oembed" frameborder="0"
allow="accelerometer;autoplay; clipboard-write; encrypted-media; gyroscope;
picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin" allowfullscreen=""></iframe>
</div>

关于 服务条款 隐私协议


代码如诗 © 2025 chat..