CSS

.scroll-up-button,.scroll-up-button_mode-header-attached,.scroll-up-button_active,.scroll-up-button:active,.scroll-up-button_mode-header-attached:active,.scroll-up-button_active:active,.story__content,.story__typography,.story__bg-story-short{background:none;}

.input_editor{color:#638c47;background:#000;font-size:3em;resize:both;}

.input_editor,.input__input{line-height:1.2em;}

.comment__children,.comment__body_highlight_yellow{background:#000;}.comment__tool,.hint,.icon,.icon--ui__link,.icon--ui__link_comments{display:block;}

.comment__more,.comment__rating-up,.comment__rating-down{color:#CCC;background:#223813;}

.comment__more:hover,.comment__more:active{color:#DFE;background:#638c47;}

.section_warning,.section_warning>a{text-decoration:none;color:#FFF;background:#900903;}.section_warning>a{text-decoration:none;color:#0D0;padding:3px;}.section_warning>a:hover{text-decoration:none;color:#0F0;background:#0009;border-radius:9px;font-size:1.2em;}

.main,.background{width:100%;max-width:100%;}

.app__inner{width:90%;max-width:90%;}

.story__content,.comment__content{font-size:3em;line-height:1.2em;}

.story-block,.story-block_type_text,.story-block>*>a{font-size:1.4em;line-height:1.2em;color:#000;text-shadow:0px 0px 1px #DEF,0px 0px 2px #CDE,0px 0px 3px #BCD,0px 0px 5px #ABC,0px 0px 7px #9AB;}

.popup__wrapper,.section_warning>a:hover{border-radius:11px;box-shadow:0px 0px 1px #684,0px 0px 2px #684,0px 0px 3px #684,0px 0px 5px #684,0px 0px 7px #684,0px 0px 4px #684,0px 0px 6px #684,0px 0px 8px #684,0px 0px 9px #684,0px 0px 11px #684;}

.story-block.story-block_type_text>p>b,.story-block>*>a:hover,.comment__content>a:hover,.rv-comment>a:hover{color:#000;text-decoration:none;text-shadow:0px 0px 1px #89f540,0px 0px 2px #89e34b,0px 0px 3px #84d14f,0px 0px 5px #638c47,0px 0px 7px #4e6e39,0px 0px 10px #253d15,0px 0px 15px #1a300b;}

.story-block>*>a,.rv-comment>a{color:#638c47;text-decoration:none;text-shadow:none;}

.profile__header,.background__placeholder{background-repeat:both;}

.icon--ui__logo-text{color:#012345;}

::selection{background:#a9eb7c;color:#000;text-shadow:none;box-shadow:none;}

.story-block__title{color:#000;}

.comment__rating-count,.comment__rating-count.hint.hint_left{font-size:1.8em;line-height:.8em;}

Не пора ли гнать ссаными тряпками с пикабы тех, кому нужен тег <code>?

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.

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