如何在Dreamweaver中的图像顶部的html页面上嵌入YouTube视频?

时间:2022-02-01 18:57:39

The webpage is all html. No css. I don't know css. I used this tutorial to take my site designed in photoshop and make it with Dreamweaver.

网页都是html。没有css。我不知道css。我使用本教程来获取我在photoshop中设计的网站,并使用Dreamweaver进行制作。

I just want to simply embed a Youtube video in a specific position on the page. But the only to embed the video is to push down one of the images and put the video beside it. I want the video to be embedded on top of the page layout as if it floats there in front of the image behind it.

我只想简单地在页面上的特定位置嵌入Youtube视频。但是嵌入视频的唯一方法是按下其中一个图像并将视频放在旁边。我希望将视频嵌入到页面布局的顶部,就像它漂浮在它后面的图像前面一样。

As you can tell, I have no idea what I'm doing.

你可以说,我不知道我在做什么。

I want the video to be on the page like this site.

我希望视频像这个网站一样在页面上。

1 个解决方案

#1


0  

Based on the code of the provided site, the video itself is running inside a div. If you don't wish to use css just define the properties directly on the style for the div which will be the container for the video as follows:

根据提供的网站的代码,视频本身在div内运行。如果你不想使用css,只需直接在div的样式上定义属性,div将是视频的容器,如下所示:

<div style="background: url(http://www.dollarshaveclub.com/skin/frontend/dsc-test/dsc-theme/images/video_placeholder.png) no-repeat; padding: 18px; width: 600px; height: 300px;">
    <iframe width="537" height="301" src="http://www.youtube.com/embed/ZUG9qYTJMsI?rel=0&autohide=1&autoplay=0"  frameborder="0" allowfullscreen></iframe>
</div>

Test it on jsfiddle: Clic here

在jsfiddle上测试它:Clic在这里

BTW: Change the background url for your background image file's location, the code for the video (gather it from youtube) and the width and height of the div accordingly to the dimensions of the video in order to customize.

顺便说一句:更改背景图片文件位置的背景网址,视频代码(从youtube收集)以及div的宽度和高度,以便根据视频的尺寸进行自定义。

Good luck!

祝你好运!

#1


0  

Based on the code of the provided site, the video itself is running inside a div. If you don't wish to use css just define the properties directly on the style for the div which will be the container for the video as follows:

根据提供的网站的代码,视频本身在div内运行。如果你不想使用css,只需直接在div的样式上定义属性,div将是视频的容器,如下所示:

<div style="background: url(http://www.dollarshaveclub.com/skin/frontend/dsc-test/dsc-theme/images/video_placeholder.png) no-repeat; padding: 18px; width: 600px; height: 300px;">
    <iframe width="537" height="301" src="http://www.youtube.com/embed/ZUG9qYTJMsI?rel=0&autohide=1&autoplay=0"  frameborder="0" allowfullscreen></iframe>
</div>

Test it on jsfiddle: Clic here

在jsfiddle上测试它:Clic在这里

BTW: Change the background url for your background image file's location, the code for the video (gather it from youtube) and the width and height of the div accordingly to the dimensions of the video in order to customize.

顺便说一句:更改背景图片文件位置的背景网址,视频代码(从youtube收集)以及div的宽度和高度,以便根据视频的尺寸进行自定义。

Good luck!

祝你好运!