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>