Difficulty with responsive videos

Asked

Viewed 42 times

0

I am developing a project for own study, thus creating the navigation pages of the same ended up finding a difficulty in responsiveness with videos since until the width 992 everything goes well below that the site breaks .inserir a descrição da imagem aqui

My question now is how to solve this problem since the Home page did not show any defect ,it has 3 articles as well as in the image with the difference of two forms instead of videos .

HTML5 code

  <!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">

    <!-- 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>
    <script src="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>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="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>
    <script src="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>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="BootstrapV3/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
  • Wow friend, you posted the code that is no problem! : D It would not be better to post the code with problem?

  • But the problem is he’s not as responsive as over there in the picture getting all broken

  • So it would not be better to put in question the code that is with the problem?

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.