1
resposta

Alterar tamanho de width e height em tag video

Olá, bom dia!

A algum tempo esse problema tem me feito quebrar a cabeça. tenho uma tag vídeo em um site e ela esta com width e height "interligados" de como que ao alterar o width a height altera junto automaticamente na mesma proporção, como se não fosse possível mudar a proporção do vídeo.

Infelizmente preciso do vídeo com uma proporção diferente, existe alguma configuração que possa ter causado isso?

<div class="container-fluid" style="margin-top:5%; margin-left:6%;">
        <div class="row">
            <div class="col-lg-2">
                <div style="min-height: 400px;margin-top: 50px;">
                    <img src="img/exemplo.png" style="max-width: 100%;">
                </div>

                <div class="list-group" id="list-tab" role="tablist">
                    <a class="list-group-item list-group-item-action active" id="list-noticia-1-list" data-toggle="list" href="#list-noticia-1" role="tab" aria-controls="noticia-1"><p class="navNoticias" id="noticiaBotao01"></p></a>
                    <a class="list-group-item list-group-item-action" id="list-noticia-2-list" data-toggle="list" href="#list-noticia-2" role="tab" aria-controls="noticia-2"><p class="navNoticias" id="noticiaBotao02">XX</p></a>
                    <a class="list-group-item list-group-item-action" id="list-noticia-3-list-list" data-toggle="list" href="#list-noticia-3" role="tab" aria-controls="noticia-3"><p class="navNoticias" id="noticiaBotao03">XX</p></a>
                    <a class="list-group-item list-group-item-action" id="list-noticia-4-list-list" data-toggle="list" href="#list-noticia-4" role="tab" aria-controls="noticia-4"><p class="navNoticias" id="noticiaBotao04">XX</p></a>
                </div>
            </div>     
                <div class="col-lg-6 col-md-8 col-sm-12" > 
                <div>
                        <object>
                            <!--<video src="exemplo.mp4" autostart="true" width="120%" loop="true">-->
                            <video id="player-video" src="" controls type="video/mp4" style="max-width: 102%; padding-top: 5px;"> <!--controls loop autoplay--> <!--style="max-width: 74%;"--> 
                                    <!--<source src="exemplo.mp4" type="video/mp4"=>
                                     Your browser does not support the video tag.-->
                            </video>
                        </object>
                </div>   
                <div class="tab-content" id="nav-tabContent" style="margin-top: 30px; min-width: 102%;">
                        <div class="tab-pane fade show in active" id="list-noticia-1" role="tabpanel" aria-labelledby="list-noticia-1-list"><h5 class="headNoticias9101" id="titulo01"></h5><p class="noticias9101" id="textoNoticia01"></p></div>
                        <div class="tab-pane fade in " id="list-noticia-2" role="tabpanel" aria-labelledby="list-noticia-2-list"><h5 class="headNoticias9101" id="titulo02"></h5><p class="noticias9101" id="textoNoticia02"></p></div>
                            <div class="tab-pane fade in " id="list-noticia-3" role="tabpanel" aria-labelledby="list-noticia-3-list"><h5 class="headNoticias9101" id="titulo03"> </h5><p class="noticias9101" id="textoNoticia03"></p></div>
                            <div class="tab-pane fade in " id="list-noticia-4" role="tabpanel" aria-labelledby="list-noticia-4-list"><h5 class="headNoticias9101" id="titulo04"></h5><p class="noticias9101" id="textoNoticia04"></p></div>
                </div>
                </div>
                <div class="col-lg-4 col-md-4 col-sm-12" align="center" id="player-video-div">
<div class="thumbnail" style="border:none;margin-left: 35px;"">
                        <a href="" target="_blank">
                            <img src="img/igpm_exemplo.jpg" <!--style="max-width:75%;"--></a>
                        <div class="blocoTextoNoticia">
                            <a href="APENAS UM EXEMPLO" class="noUnderline"><h4> confira as atualizações do indice em julho</h4></a>
                        </div>
                    </div> 
1 resposta

Fala aí Gabriel, tudo bem? Acho que o problema nem vai ser aumentar as dimensões do seu video, mas, depende de qual resolução ele está exportado.

Se você aumentar muito o elemento, o vídeo vai ficar com espaços pretas, isso porque seu vídeo pode não ser do tamanho do qual seu elemento estará renderizando.

Espero ter ajudado.