I'm developing a project for my own study, so creating the navigation pages of the same I found a difficulty in responding with videos since until the width 992 everything runs well below that the site breaks. 
MyquestionnowishowtosolvethisproblemsincetheintheHomepagewasnotdefective,ithas3subjectsaswellastheimagewiththedifferenceoftwoformsinsteadofthevideos.
HTML5code
<!DOCTYPEhtml><htmllang="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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Dubla Blog</title>
<!-- Bootstrap -->
<link href="BootstrapV3/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/folhaDeEstilo.css">
<!-- 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.3/html5shiv.min.js"></script><scriptsrc="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<header class="container col-sm-12 barraDeNavegacao">
<h1><span style="color: red" >Dubla</span>Blog</h1>
<div style="display: inline-block; float: right; margin-top: 16px">
<button type="button" class="navbar-toggle collapsed btn btn-default glyphicon glyphicon-list"
data-toggle="collapse" data-target="#menuLateral">
</button>
</div>
<nav class="navbar-right collapse navbar-collapse col-sm-4 col-xs-10 menuLateral" id="menuLateral">
<ul class="nav nav-tabs">
<li role="presentation" class="itemMenu " >
<a href="index.html" class="">Home</a>
</li>
<li role="presentation" class="itemMenu active">
<a href="#">Anime</a>
</li>
<li role="presentation" class="itemMenu">
<a href="cartoons.html">Cartoons</a>
</li>
<li role="presentation" class="itemMenu">
<a href="filmes.html">Filmes</a>
</li>
</li>
<li role="presentation" class="itemMenu">
<a href="doadores.html">Doadores</a>
</li>
</ul>
</nav>
</header>
<article class="container">
<section class="conteudo col-lg-6 col-md-6 col-sm-6 col-xs-6">
<h4 style="display: inline-block; margin-left: 5px">Entrevista Wendel Bezerra</h4>
<span class="postagem">Postado por : Henrique Duarte</span>
<figure>
<img src="imagens/wendel-bezerra-goku-300.png" class="img-responsive">
<figcaption>
<p>Nullam hendrerit arcu sit amet posuere sagittis. Cras luctus iaculis placerat. Quisque semper ves
tibulum justo, at feugiat ligula. Nunc accumsan diam velit, vitae accumsan tortor tempus et. Pro
in blandit ullamcorper semper. Maecenas sed luctus sapien. Aenean rhoncus velit mauris, et vesti
bulum magna iaculis in. In metus eros, iaculis eget tortor non, cursus porttitor nibh. Vestibulum
tristique, nisl a consectetur eleifend, tellus enim dignissim mi, faucibus hendrerit ligula tell
us ac lacus. Maecenas eleifend malesuada dolor sit amet commodo.
Nullam hendrerit arcu sit amet posuere sagittis. Cras luctus iaculis placerat. Quisque semper ves
tibulum justo, at feugiat ligula. Nunc accumsan diam velit, vitae accumsan tortor tempus et. Pro
in blandit ullamcorper semper. Maecenas sed luctus sapien. Aenean rhoncus velit mauris, et vesti
bulum magna iaculis in. In metus eros, iaculis eget tortor non, cursus porttitor nibh. Vestibulum
tristique, nisl a consectetur eleifend, tellus enim dignissim mi, faucibus hendrerit ligula tell
us ac lacus. Maecenas eleifend malesuada dolor sit amet commodo.
</p>
</figcaption>
</figure>
</section>
<aside class="col-lg-5 col-md-5 col-sm-5 col-xs-5">
<div class="embed-responsive embed-responsive-4by3 tamanhoDoVideo">
<iframe class="embed-responsive-item" src="videos/Dubladores%20de%20Naruto,Sasuke,Sakura!%20(Storm4Dublado!).mp4"oncanplay="break"></iframe>
</div>
</aside>
<section class="conteudo col-lg-6 col-md-6 col-sm-6 col-xs-6">
<h4 style="display: inline-block; margin-left: 5px">O super Briggs</h4>
<span class="postagem">Postado por : Bruna Almeida</span>
<figure>
<img src="imagens/briggs-02-e1487326418720-essa.jpg" class="img-responsive">
<figcaption>
<p>Nullam hendrerit arcu sit amet posuere sagittis. Cras luctus iaculis placerat. Quisque semper ves
tibulum justo, at feugiat ligula. Nunc accumsan diam velit, vitae accumsan tortor tempus et. Pro
in blandit ullamcorper semper. Maecenas sed luctus sapien. Aenean rhoncus velit mauris, et vesti
bulum magna iaculis in. In metus eros, iaculis eget tortor non, cursus porttitor nibh. Vestibulum
tristique, nisl a consectetur eleifend, tellus enim dignissim mi, faucibus hendrerit ligula tell
us ac lacus. Maecenas eleifend malesuada dolor sit amet commodo.
Nullam hendrerit arcu sit amet posuere sagittis. Cras luctus iaculis placerat. Quisque semper ves
tibulum justo, at feugiat ligula. Nunc accumsan diam velit, vitae accumsan tortor tempus et. Pro
</p>
</figcaption>
</figure>
</section>
<aside class="col-lg-5 col-md-5 col-sm-5 col-xs-5">
<div class="embed-responsive embed-responsive-4by3 tamanhoDoVideo">
<iframe class="embed-responsive" src="videos/10%20CURIOSIDADES%20SOBRE%20A%20PROFISSÃO%20DE%20DUBLADOR.mp4"></iframe>
</div>
</aside>
<section class="conteudo col-lg-6 col-md-6 col-sm-6 col-xs-6">
<h4 style="display: inline-block; margin-left: 5px">É você Bulma ?</h4>
<span class="postagem">Postado por : Alex Duarte</span>
<figure>
<img src="imagens/Tânia%20Gaidarji-anime-220.jpg" class="img-responsive">
<figcaption>
<p>Nullam hendrerit arcu sit amet posuere sagittis. Cras luctus iaculis placerat. Quisque semper ves
tibulum justo, at feugiat ligula. Nunc accumsan diam velit, vitae accumsan tortor tempus et. Pro
in blandit ullamcorper semper. Maecenas sed luctus sapien. Aenean rhoncus velit mauris, et vesti
bulum magna iaculis in. In metus eros, iaculis eget tortor non, cursus porttitor nibh. Vestibulum
tristique, nisl a consectetur eleifend, tellus enim dignissim mi, faucibus hendrerit ligula tell
us ac lacus. Maecenas eleifend malesuada dolor sit amet commodo.
Nullam hendrerit arcu sit amet posuere sagittis. Cras luctus iaculis placerat. Quisque semper ves
tibulum justo, at feugiat ligula. Nunc accumsan diam velit, vitae accumsan tortor tempus et. Pro
in blandit ullamcorper semper. Maecenas sed luctus sapien. Aenean rhoncus velit mauris, et vesti
bulum magna iaculis in. In metus eros, iaculis eget tortor non, cursus porttitor nibh. Vestibulum
tristique, nisl a consectetur eleifend, tellus enim dignissim mi, faucibus hendrerit ligula tell
us ac lacus. Maecenas eleifend malesuada dolor sit amet commodo.
</p>
</figcaption>
</figure>
</section>
</article>
<footer>
<hr>
<p style="text-align: center ;color: white">Projeto construido para estudo</p>
<p style="text-align: center;color: white" >Lucas Alves Cardoso de Jesus</p>
</footer>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script><!--Includeallcompiledplugins(below),orincludeindividualfilesasneeded--><scriptsrc="BootstrapV3/bootstrap/js/bootstrap.min.js"></script>
</html>
CSS code
> @font-face{
> font-family: noticia;
>
> }
>
>
>
> /*-------------------------------------HEADER*/ header{
> background-color: white;
> height: 65px; }
>
>
> span.postagem{
> font-size: 12px;
> display: block;
> margin-top: -10px;
> margin-left: 5px; }
>
> header h1{ /* latter-spacing controlar espaço entre as letras*/
> display: inline-block;
> margin-top:24px; }
>
> header ul{ }
>
>
> header.barraDeNavegacao{
> height: 90px; } header nav{
> margin-top: 20px; }
>
> nav.menuLateral{
> font-size: 16px;
> margin-top: 37px; }
>
>
> /*----------------------------------BODY*/
>
> body{
> background: url("../imagens/microfundo.jpg") no-repeat;
> background-size: cover;
> background-position: 90% 80px; }
>
> section.conteudo{
>
> display: inline-block;
> position: relative;
> background-color: white;
> margin-top: 10px;
> overflow: hidden;
> border-right: 1px solid; }
>
> figure{
> margin:0px;
> text-align: justify;
> overflow: hidden;
> height: 241px;
> display: inline-block; }
>
> figcaption p{
> margin-left: 5px;
> margin-bottom: 5px; }
>
> figure img{
> float: left;
> margin-right: 5px;
> margin-left: 5px; }
>
> aside{
> float: right;
> margin-bottom: 96px;
>
> } aside.cadastro{
> color: white; }
>
> .embed-responsive-4by3 {
> padding-bottom: 57%; }
>
> button.botaoDoador{
> float: right;
> margin-top: 15px; }
>
> .tabela{
> padding-top: 12px;
> padding-bottom: 47px; }
>
> .contrate{
> background-color: #f6f0f6; }
>
> /*----------------------------------FOOTER*/
>
>
> hr{
> margin-top: 5px;
> margin-left: 44px;
> margin-right: 65px;
}
Page Index
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Dubla Blog</title>
<!-- Bootstrap -->
<link href="BootstrapV3/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/folhaDeEstilo.css">
<!-- 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.3/html5shiv.min.js"></script><scriptsrc="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<header class="container col-sm-12 barraDeNavegacao">
<h1><span style="color: red" >Dubla</span>Blog</h1>
<div style="display: inline-block; float: right; margin-top: 16px">
<button type="button" class="navbar-toggle collapsed btn btn-default glyphicon glyphicon-list"
data-toggle="collapse" data-target="#menuLateral">
</button>
</div>
<nav class="navbar-right collapse navbar-collapse col-sm-4 col-xs-10 menuLateral" id="menuLateral">
<ul class="nav nav-tabs">
<li role="presentation" class="active itemMenu" >
<a href="index.html" class="">Home</a>
</li>
<li role="presentation" class="itemMenu">
<a href="anime.html">Anime</a>
</li>
<li role="presentation" class="itemMenu">
<a href="cartoons.html">Cartoons</a>
</li>
<li role="presentation" class="itemMenu">
<a href="filmes.html">Filmes</a>
</li>
</li>
<li role="presentation" class="itemMenu">
<a href="doadores.html">Doadores</a>
</li>
</ul>
</nav>
</header>
<article class="container">
<section class="conteudo col-lg-6 col-md-6 col-sm-7 col-xs-6">
<h4 style="display: inline-block; margin-left: 5px">Entrevista Wendel Bezerra</h4>
<span class="postagem">Postado por : Henrique Duarte</span>
<figure>
<img src="imagens/wendel-bezerra-goku-300.png" class="img-responsive">
<figcaption>
<p>Nullam hendrerit arcu sit amet posuere sagittis. Cras luctus iaculis placerat. Quisque semper ves
tibulum justo, at feugiat ligula. Nunc accumsan diam velit, vitae accumsan tortor tempus et. Pro
in blandit ullamcorper semper. Maecenas sed luctus sapien. Aenean rhoncus velit mauris, et vesti
bulum magna iaculis in. In metus eros, iaculis eget tortor non, cursus porttitor nibh. Vestibulum
tristique, nisl a consectetur eleifend, tellus enim dignissim mi, faucibus hendrerit ligula tell
us ac lacus. Maecenas eleifend malesuada dolor sit amet commodo.
Nullam hendrerit arcu sit amet posuere sagittis. Cras luctus iaculis placerat. Quisque semper ves
tibulum justo, at feugiat ligula. Nunc accumsan diam velit, vitae accumsan tortor tempus et. Pro
in blandit ullamcorper semper. Maecenas sed luctus sapien. Aenean rhoncus velit mauris, et vesti
bulum magna iaculis in. In metus eros, iaculis eget tortor non, cursus porttitor nibh. Vestibulum
tristique, nisl a consectetur eleifend, tellus enim dignissim mi, faucibus hendrerit ligula tell
us ac lacus. Maecenas eleifend malesuada dolor sit amet commodo.
</p>
</figcaption>
</figure>
</section>
<aside class="col-lg-6 col-md-5 col-sm-5 col-xs-6 cadastro">
<h4>Quer se tornar um padrinho Dubla ?</h4>
<h5>Cadastra-se agora</h5>
<form>
<fieldset class="form-group">
<label for="nome">Nome :</label>
<input type="text" id="nome" class="form-control">
<label for="email">E-Mail</label>
<input type="email" id="email" class="form-control">
<label for="senha">Senha</label>
<input type="password" id="senha" class="form-control ">
<button class="btn btn-info botaoDoador" type="submit">Cadastrar</button>
</fieldset>
</form>
</aside>
<section class="conteudo col-lg-6 col-md-6 col-sm-7 col-xs-6">
<h4 style="display: inline-block; margin-left: 5px">O super Briggs</h4>
<span class="postagem">Postado por : Bruna Almeida</span>
<figure>
<img src="imagens/briggs-02-e1487326418720-essa.jpg" class="img-responsive">
<figcaption>
<p>Nullam hendrerit arcu sit amet posuere sagittis. Cras luctus iaculis placerat. Quisque semper ves
tibulum justo, at feugiat ligula. Nunc accumsan diam velit, vitae accumsan tortor tempus et. Pro
in blandit ullamcorper semper. Maecenas sed luctus sapien. Aenean rhoncus velit mauris, et vesti
bulum magna iaculis in. In metus eros, iaculis eget tortor non, cursus porttitor nibh. Vestibulum
tristique, nisl a consectetur eleifend, tellus enim dignissim mi, faucibus hendrerit ligula tell
us ac lacus. Maecenas eleifend malesuada dolor sit amet commodo.
Nullam hendrerit arcu sit amet posuere sagittis. Cras luctus iaculis placerat. Quisque semper ves
tibulum justo, at feugiat ligula. Nunc accumsan diam velit, vitae accumsan tortor tempus et. Pro
</p>
</figcaption>
</figure>
</section>
<aside class="col-lg-6 col-md-5 col-sm-5 col-xs-5 tabela">
<table class="table table-striped">
<thherd>
<tr>
<th>Doadores</th>
<th>Valor</th>
<th>Ano</th>
</tr>
</thherd>
<tbody>
<tr>
<th>Renan</th>
<th>R$ 350,00</th>
<th>2017</th>
</tr>
<tr class="contrate">
<th>Luis</th>
<th>R$ 1000,00</th>
<th>2018</th>
</tr>
<tr>
<th>Lucas</th>
<th>R$ 870,00</th>
<th>2017</th>
</tr>
<tr class="contrate">
<th>Ruan</th>
<th>R$ 800,00</th>
<th>2017</th>
</tr>
<tr>
<th>Lucas</th>
<th>R$ 670,00</th>
<th>2018</th>
</tr>
</tbody>
</table>
</aside>
<section class="conteudo col-lg-6 col-md-6 col-sm-7 col-xs-6">
<h4 style="display: inline-block; margin-left: 5px">É você Bulma ?</h4>
<span class="postagem">Postado por : Alex Duarte</span>
<figure>
<img src="imagens/Tânia%20Gaidarji-anime-220.jpg" class="img-responsive">
<figcaption>
<p>Nullam hendrerit arcu sit amet posuere sagittis. Cras luctus iaculis placerat. Quisque semper ves
tibulum justo, at feugiat ligula. Nunc accumsan diam velit, vitae accumsan tortor tempus et. Pro
in blandit ullamcorper semper. Maecenas sed luctus sapien. Aenean rhoncus velit mauris, et vesti
bulum magna iaculis in. In metus eros, iaculis eget tortor non, cursus porttitor nibh. Vestibulum
tristique, nisl a consectetur eleifend, tellus enim dignissim mi, faucibus hendrerit ligula tell
us ac lacus. Maecenas eleifend malesuada dolor sit amet commodo.
Nullam hendrerit arcu sit amet posuere sagittis. Cras luctus iaculis placerat. Quisque semper ves
tibulum justo, at feugiat ligula. Nunc accumsan diam velit, vitae accumsan tortor tempus et. Pro
in blandit ullamcorper semper. Maecenas sed luctus sapien. Aenean rhoncus velit mauris, et vesti
bulum magna iaculis in. In metus eros, iaculis eget tortor non, cursus porttitor nibh. Vestibulum
tristique, nisl a consectetur eleifend, tellus enim dignissim mi, faucibus hendrerit ligula tell
us ac lacus. Maecenas eleifend malesuada dolor sit amet commodo.
</p>
</figcaption>
</figure>
</section>
</article>
<footer>
<hr>
<p style="text-align: center ;color: white">Projeto construido para estudo</>
<p style="text-align: center;color: white" >Lucas Alves Cardoso de Jesus</p>
</footer>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script><!--Includeallcompiledplugins(below),orincludeindividualfilesasneeded--><scriptsrc="BootstrapV3/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>