Template of landing page with embedded video

Report · Dec 07, 2016

I'm new to Dreamweaver. All I need is a page with a background and an embedded video at the centre. Any idea where I could find a template? Thanks

Report · Dec 07, 2016

Try this:

<!doctype html>

<head>

<title>Bootstrap 3.3.7 Layout</title>

<!--[if lt IE 9]>

<![endif]-->

<style>

/**BACKGROUND IMAGE**/

body {

background: url(http://lorempixel.com/900/500/abstract/4) no-repeat center center fixed;

background-size:cover}

.center-block {float:none}

.embed-responsive {

margin-top:15%;

border: 4px solid rgba(0,0,0,0.5);}

</style>

</head>

<body>

</div>

<p class="text-center">Abstract background-image courtesy of Lorempixel.com.</p>

</div>

</body>

</html>

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Dec 07, 2016

A few lines of Flexbox would do this, example below:

<!DOCTYPE html>

<html>

<head>

<title>Vertical/Horizontal Centre Video</title>

<style>

body {

margin: 0;

}

.container {

display: -webkit-box;

display: -ms-flexbox;

display: flex;

-webkit-box-pack: center;

-ms-flex-pack: center;

justify-content: center;

-webkit-box-align: center;

-ms-flex-align: center;

align-items: center;

height: 100vh;

background: url(http://www.wallpaperscharlie.com/wp-content/uploads/2016/09/Free-Space-Wallpapers-6.jpg);

background-size:cover

}

.video_wrapper {

width: 80%;

max-width: 640px;

}

.video {

position:relative;

margin: 0 auto;

padding-bottom:56.25%;

padding-top:30px;

height:0;

overflow:hidden;

}

.video iframe {

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

}

</style>

</head>

<body>

</div>

</div>

</div>

</body>

</html>