Стиль кнопки

Всем привет, столкнулся с проблемой в фронтед разработке с следующими стилями:

<style>

.container {

width: 100%;

display: flex;

justify-content: center;

align-items: center;

max-width: 90%;

margin: 0 auto;

padding-bottom: -200px;

}

</style>

<style>

.video {

position: relative;

z-index: 1;

padding-bottom: -200px;

border-radius: 5px;

margin-top: -1px;

width: 100%;

height: 100%;

margin-bottom: -20px;

background: transparent url('/medio/free-icon-play-button-2765018.png')no-repeat center;

background-size: 20%;

padding-top: 56.25%;

}

.video:hover {

cursor: pointer;

}

</style>

<style>

.video iframe {

position: absolute;

top: 0px;

right: 0px;

bottom: 0px;

left: 0px;

width: 100%;

height: 100%;

}

</style>

<style>

.vol{

font-size: 30px;

margin-left: 99px;

margin-bottom: 10px;

}

</style>

<style>

.ready {

padding: 0px;

padding-bottom: -200px;

margin-top: 0px;

}

</style>

<style>

.video.ready{

padding-bottom: 0px;

}

</style>

<style>

span.likebtn-wrapper.lb-loaded.lb-style-drop.lb-popup...-light {

max-width: 50%;

float: left;

margin-top: 50px;

margin-left: 90px;

}

</style>

<style>

.button1 {

width: 50%;

max-height: 100%;

min-height: 100%;

max-width: 10s0%;

margin-top: 0px;

background: green;

border: none;

position: relative;

z-index: 1;

}

</style>

<style>

.cen1 {

margin-bottom: 0px;

padding-bottom: 0px;

}

</style>

<div class="container">

<div class="video">

<center class="cen1">

<button ondblclick="toggleFullScreen()" id="play-button" class="button1"></button>

</center>

</div>

</div>

Кто сможет подсказать почему элемент с классом button1 не принимает значения height: 100%

для элемента container и video.

Кто подскажет большое спасибо.