css 将电话帧模型添加到嵌入视频

mgdq6dx1  于 2023-02-01  发布在  其他
关注(0)|答案(1)|浏览(134)

我希望你能帮上忙。我基本上是在寻找一种方法来整合一些视频到我的WordPress博客,不知道从哪里开始。这些视频是为Instagram垂直拍摄的,我想在手机框架中垂直显示它们。hand holding phone
我试着上传了一段五秒钟的视频,视频里我笑着说有几只狗坐在一辆停着的汽车的驾驶座上,但它只有15MB,甚至不能播放,所以我想我最好的选择是使用未列出的Youtube视频并将它们嵌入其中。这就是视频,它真的让我很痒。dogs in scotland pretending to drive car, very important
基本上我想问的是,是否有一种方法可以在垂直视频中添加边框或框架,如果有,有人能为我指出任何相关代码的正确方向吗?
提前干杯:)
我试过使用Final Cut和Photoshop添加一个帧,但我有数百个短的荒谬的视频,并希望有一种方法,我可以自动添加一个帧使用代码,每次我嵌入一个Youtube视频。我将很快恢复我的英国海岸散步,明年将无法使用我的笔记本电脑,所以如果有一些代码,我可以复制和粘贴每一次,这将是理想的。

mcvgt66p

mcvgt66p1#

你可以使用这样的结构:
超文本标记语言

<div class="wrapper">
    <img src="./assest/phone-frame.png" />
    <video scr="./assets/video.mp4" />
</div>

中央支助系统

.wrapper {
    position: relative;
    height: 700px;
}
.wrapper img {
    position: absolute;
    height: 100%;
    z-index: 2;
}
.wrapper video {
    position: absolute;
    height: 100%;
    z-index: 1;
}

您只需要使用top和left属性(或者right和bottom,随您喜欢)调整img和video的位置,使它们匹配即可

相关问题