0

i have tried multiple solutions to my problem but i guess the unique structure of my project designs , require unique solution to fit the video in a box and keeping it responsive. here is the snapshot of what i want to achieve: mock up image

image preview

now this is the link of my code : http://new.loversorlosers.com see the black box where i want to put responsive video.

so far i have tried different examples available on SO and other tutorial websites, but none are working . my guess is this is happening because of unique position of video embed.

currently i am trying this jQuery approach but even this is not working on different screen sizes: StackOverflow example position of element over background

i am using bootstrap 3 & bootswatch framework.

thanks for your help

Community
  • 1
  • 1
Alok
  • 808
  • 13
  • 40

1 Answers1

0

I found this youtube video that will walk you thru the steps. Create a folder, download bootstrap, extract the files in your new folder paste in the following code https://www.youtube.com/watch?v=oAPdNKTrBYA

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
    h1 {
      color: red;
    }

    h2 {
      color: black;
    }

    h3 {
      color: red;
    }

    </style>
  </head>
  <body>
    <div class="row">
  <div class="col-md-6">
      <div class="navbar-wrapper">
    <nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>


    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
</div><!-- end of navbar wrapper -->

      <div class="container">
        <div class="col-md-5">
  <div class="panel panel-primary">
    <div class="panel-heading">
      <p class="panel-title">Responsive video Embed 16by9</p>
    </div><!-- end of panel heading -->
    <div class="panel-body">
      <div class="embed-responsive embed-responsive-16by9">
      <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/-dfnKTY_dfc" allowfullscreen></iframe>

      </div>

    </div><!-- end of panel body -->
  </div><!-- panel closes out here -->
 </div>
</div><!-- container -->
</div>
<div class="col-md-6">
 <h1> Attention All<br>Lovers..</h1>
<h2>Join Todd Bridges</h2>
<h3>For Lovers or Losers</h3>
<h2>the Game Show
And Receive a 3 Day, 2 Night stay
In the Entertainment Capital
of the World </h2>


<h2>The best part is it
Won't Cost you a dime!!! </h2>
<div class="btn btn-default"> Click Here Now Reserver Your Seat!!!</div>

</div>
</div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>
Dee
  • 704
  • 5
  • 6