如何使用 CSS 更改 DIV 视频元素的位置？

Posted 2023-03-05

【中文标题】如何使用 CSS 更改 DIV 视频元素的位置？

【英文标题】：How to Change Position of DIV Video element using CSS?

【发布时间】：2017-11-12 23:12:36

【问题描述】：

在此页面上，您可以在帖子末尾看到嵌入的视频。 (http://viralinindia.net/narendra-modi/positive-news-journalist-megyn-kelly-insults-tea-seller-modi/14806/)

现在我想使用 CSS 将该视频放在标题上方，因为我已手动将视频放在每个帖子的末尾，并且不可能更改每个帖子。

该网站在 WordPress 上。

有什么想法吗？

【问题讨论】：

这不能用 CSS 来完成。您必须使用 javascript/jQuery 来操作 dom 结构。或者，您可以尝试使用 SQL 修改数据库中的所有帖子，但是我想这会很棘手。

你能告诉我如何使用 java 做到这一点吗？

对不起，我真的不想为你写代码 :) 但你需要像 $("#source").appendTo("#destination"); 这样的东西。

【参考方案1】：

您可以尝试，但如果不首先更改 html 结构，它很容易被破坏。您还应该注意较低分辨率 (RWD) 会进一步改变 CSS 代码。

但是要给出这个想法（这是一个坏主意），您可以尝试以下方法：

.video-container 
    position: absolute; /* position it absolutely */
    top: 0;
    width: 640px;


.theiaPostSlider_slides 
    position: initial; /* let the .video-container break out of the relative wrapper */


.td-post-header 
    padding-top: 500px; /* give the video some place at the top */

【讨论】：

爱你，兄弟，它的工作，你能告诉我如何使视频现在响应，因为它在移动设备上以全尺寸显示？

我已经使视频具有响应性，但它​​破坏了一些东西。

您应该在 CSS 中查找媒体查询断点 - 例如 @media (max-width: 767px) 并为视频容器添加适当的宽度。视频容器现在是绝对定位的，这会给 RWD 带来更多麻烦 - 这就是为什么最好更改页面结构而不是单独处理 CSS。

viralinindia.net/videos/… 现在检查一切都已修复。非常感谢兄弟