How do you embed a youtube video on an html page on top of an image in Dreamweaver?

Question

I just want to simply embed a Youtube video in a specific position on the page. But the only way 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.

Answer 1

Let me start by saying that you don't require Dreamweaver to accomplish this. Since you are strictly dealing with HTML and CSS, any text editor would suffice.

Now, as this question stands is incredibly broad, so the solution can be accomplished in many different ways. With that being said, many assumptions will need to be made.

To answer the question, in many cases when an object goes over another object, it's common to think to use a combination of position: relative; on the parent element, and then position: absolute; on the child element.

Is not clear if the image described in the question is a background image or not. If it is a background image, then things may be a bit easier to work with. But if it's an image in the HTML via the <img> tag, then things start getting more complex because now we are required to deal with the stacking order of the elements, or z-index property in CSS.

So let's stick with the assumption that the image is used as a background, in our case, a background on the body element.

But first let's work on the video itself. This tool is perfect for making videos responsive: http://embedresponsively.com/

For this example we only need the HTML provided by embedresponsively.com, which is this:

<div class="embed-container">

<iframe src="https://www.youtube.com/embed/6i0a7RDPkM8" frameborder="0" allowfullscreen></iframe>

</div>

And this is the CSS that makes that video responsive:

.embed-container {

position: relative;

padding-bottom: 56.25%;

height: 0;

overflow: hidden;

max-width: 100%;

}

.embed-container iframe,

.embed-container object,

.embed-container embed {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

}

Now, let's add the background image on the body element:

body {

margin: 5em;

background: url(https://images.unsplash.com/photo-1564186763535-ebb21ef5277f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80) no-repeat center center/cover;

}

As you can see in this demo, the video is "floating" on top of the background image: https://jsfiddle.net/q75d80mb/

Hope this helps.

Answer 2

You can use the z-index and position properties in your CSS. First, give the image and the embedded youtube video container a position of absolute and then set the z-index of the image to 1 and the z-index of the embedded youtube video to 2.