Skip to main content
D
Dynopete
Inspiring
December 7, 2016
Question

Template of landing page with embedded video

  • December 7, 2016
  • 2 replies
  • 770 views

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

    This topic has been closed for replies.

    2 replies

    O
    osgood_
    Legend
    December 7, 2016

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

    <!DOCTYPE html>

    <html>

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <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 class="container">

    <div class="video_wrapper">

    <div class="video">

    <iframe width="640" height="352" src="https://www.youtube.com/embed/ePbKGoIGAXY" frameborder="0" allowfullscreen></iframe>

    </div>

    <!-- end video -->

    </div>

    <!-- end video_wrapper -->

    </div>

    <!-- end container -->

    </body>

    </html>

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    December 7, 2016

    Try this:

    <!doctype html>

    <html lang="en">

    <head>

    <meta charset="utf-8">

    <title>Bootstrap 3.3.7 Layout</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!--[if lt IE 9]>

    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

    <![endif]-->

    <!--Bootstrap-->

    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <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 class="container">

    <div class="row">

    <div class="col-sm-10 center-block">

    <!-- 16:9 video aspect ratio -->

        <div class="embed-responsive embed-responsive-16by9">

        <!--EMBED YOUTUBE VIDEO HERE-->

          <iframe class="embed-responsive-item" src="//www.youtube.com/embed/ePbKGoIGAXY"></iframe>

        </div>

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

    </div>

    </div>

    </div>

    <!--latest jQuery-->

    <script src="https://code.jquery.com/jquery-1.12.2.min.js" integrity="sha256-lZFHibXzMHo3GGeehn1hudTAP3Sc0uKXBXAzHX1sjtk=" crossorigin="anonymous"></script>

    <!--Bootstrap-->

    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    </body>

    </html>

    Nancy O'Shea— Product User & Community Expert
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices