Video with overflow not hidden at mobile - html

Question

I have some problems doing changes on this site http://rocainternacional.org/2018/ In mobile, you can scroll to the right. Why it's happening? I want to make the video overflow hidden and something like size cover too..
.body {
overflow: hidden;
}
.titulos {
margin-top: 200px;
padding: 0 100px;
margin-bottom: 200px;
}
.titulos2 {
margin-top: 300px;
padding: 0 100px;
margin-bottom: 200px;
}
.titulo-1 {
background-color: rgba(255, 255, 255, 0.8);
color: rgb(0, 153, 120);
}
.titulo-1 h2 {
margin-bottom: 0;
margin-top: 0;
padding: 20px;
font-weight: 300;
padding-left: 70px;
font-size: 35px;
}
.titulo-2 {
background-color: rgba(0, 153, 120, 0.5);
color: rgb(255, 255, 255);
}
.titulo-2 h2 {
margin-top: 0 !important;
font-size: 30px;
padding: 50px;
padding-left: 70px;
}
.boton-right {
display: flex;
justify-content: flex-end;
}
.titulo-boton {
background-color: #001F4A;
margin-top: 0;
margin-bottom: 0;
padding: 15px 30px;
}
.titulo-boton a {
color: #fff;
font-weight: 300;
font-size: 20px
}
.footer-title {
margin: 0 auto;
margin-top: 30px;
}
.item-1,
.item-2,
.item-3 {
position: absolute;
display: block;
/*top: 2em;*/
width: 60%;
padding-left: 0px;
font-size: 2em;
animation-duration: 10s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
.item-1{
animation-name: anim-1;
}
.item-2{
animation-name: anim-2;
}
.item-3{
animation-name: anim-3;
}
#keyframes anim-1 {
0%, 8.3% { left: -100%; opacity: 0; }
8.3%,25% { left: 25%; opacity: 1; }
33.33%, 100% { left: 110%; opacity: 0; }
}
#keyframes anim-2 {
0%, 33.33% { left: -100%; opacity: 0; }
41.63%, 58.29% { left: 25%; opacity: 1; }
66.66%, 100% { left: 110%; opacity: 0; }
}
#keyframes anim-3 {
0%, 66.66% { left: -100%; opacity: 0; }
74.96%, 91.62% { left: 25%; opacity: 1; }
100% { left: 110%; opacity: 0; }
}
#media only screen and (max-width: 2000px) {
.titulo-1 {
width: 350px;
}
.item-1, .item-2, .item-3 {
width: 50%;
padding-left: 50px !important;
}
}
#media only screen and (max-width: 1700px) {
.item-1, .item-2, .item-3 {
width: 55%;
padding-left: 0px !important;
}
}
.text-blue {
color: #337ab7 !important;
}
.opinion {
margin-bottom: 30px;
}
<!-- HTML CODE -->
<!-- Here are the slider elements -->
<!-- In desktop overflow: hidden works fine, but in mobile it doesnt -->
<div class="container titulos" id="slideshow">
<div class="row titulo-1">
<h2>Bienvenidos a R.O.C.A. Internacional</h2>
</div>
<div class="row titulo-2" style="height: 200px">
<h2 class="item-1 no-padding-left">Capacitación profesional en todas las especialidades de la Odontología con Certificación Universitaria.</h2>
<h2 class="item-2 no-padding-left">Diplomados de alto nivel, dictado por docentes de reconocimiento intenacional.</h2>
<h2 class="item-3 no-padding-left">Red Odontológica de Capacitación Internacional.</h2>
</div>
<div class="row boton-right">
<div class="titulo-boton">
Conocer más
</div>
</div>
</div>
In desktop the overflow: hidden works fine, but in mobile it doesnt..
Any suggest?
EDIT: I added this meta tag to the head and it did the trick
NOTE: How i put this post as done?

Answer 1

Try body tag overflow hidden..

Answer 2

This meta tag did the trick
Now on mobile it works perfect..