Iwanttomakeanapplicationwiththefollowingdefinitions,ascreen(responsive),withalistoftitlesforvideolessonontheright,andyoumusthavescroll,wheneverIscrolltheelement,100%doesnottaketheresolution.
<!DOCTYPEhtml><htmllang="pt-BR">
<head>
<title>play de video</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/css/reset.css" rel="stylesheet" type="text/css"/>
<link href="assets/css/style.css" rel="stylesheet" type="text/css"/>
< src="assets/js/jquery.js"></>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="content">
<header class="main_header">
<a href="#"><img itemprop="logo" class="logo" src="assets/images/logo_ead.png" title="Identidade visual" alt="Identidade visual"></a>
</header>
<article class="article_left f_left">
<section class="content_section f_left">
<header class="header_article">
<h1 class="title_curso bolder">Curso: Administração.
<img class="img_icons" src="assets/images/play_title.png" alt="Imagens de play" title="Imagens de play">
</h1>
<p class="title_aula bold titleResponse">01 - Iniciando curso de Administração.</p>
</header>
<section class="content_section_video">
<style>.embed-container
{ position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; }
.embed-container iframe, .embed-container object, .embed-container embed
{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
</style>
<div class='embed-container video-placeholder-player'>
<iframe src="https://www.youtube.com/embed/zRvLr7W41Po"frameborder="0" allowfullscreen></iframe>
</div>
</section>
<progress class="progress_bar">
</progress>
</section>
</article>
<aside class="aside_block f_right">
<!-- Nesses elementos na qual quero o scroll -->
<nav>
<ul>
<li>
<a class="video-thumbnail-player" href="https://www.youtube.com/watch?v=_y7rKxqPoyg" >
<div class="left_block">
<img class="thumbnail" title="" alt="" src="http://img.youtube.com/vi/zRvLr7W41Po/3.jpg"/><h1class="fontblack bolder titleRequest">01 - Iniciando curso de Administração</h1>
<h1 class="fontblack bolder">Conceitos de Administração</h1>
</div>
</a>
</li>
<li>
<a class="video-thumbnail-player" href="https://www.youtube.com/watch?v=_y7rKxqPoyg" >
<div class="left_block">
<img class="thumbnail" title="" alt="" src="http://img.youtube.com/vi/zRvLr7W41Po/3.jpg"/><h1class="fontblack bolder titleRequest">02 - Iniciando curso de Administração</h1>
<h1 class="fontblack bolder">02 - Conceitos de Administração</h1>
</div>
</a>
</li>
</ul>
</nav>
</aside>
</div>
<footer class="content_footer f_clear">
<p>©2015 - TODOS OS DIREITOS RESERVADOS</p>
</footer>
< src="assets/js/s.js"></>
</body>
</html>
body{ overflow: hidden;}
.container{position: relative; top: 0px; min-height: 100%;}
.main_header{
width: 100%;
height: 90px;
background: #555454;
}
.logo{width: 100%; max-width: 120px; margin: 15px 35px;}
.content h1{margin: 5px 35px;}
.content p{margin: 0 60px;}
.content p img{ margin-bottom: 5px;}
.content_width{width: 70%;}
.fontlitgh{ font-size: 14px; font: 'Open Sans', sans-serif; font-weight: 300;}
.title_curso{ font-size:15px; font:'Open Sans', sans-serif; color: #a4a4a4;}
.title_aula{font-size:18px; font: 'Open Sans', sans-serif;}
.content_ligth{width: 70%; height:60px; background: #e4e4e4;}
.content_video{ float: left; height: 100%; }
.progress_bar{clear: both; width: 100%; height: 5px; background: #c83d00;}
.asside_block{width: 30%; height:100%; float:right; color: #FFF; background: #343434; margin-top: -83px;}
.asside_block ul{ background: #343434; float: left; display: block; margin: 2px;}
.asside_block li{width: 70%; display:block; background: #e4e4e4; float: right; margin: 5px 10px;}
.asside_block h1{font-size: 14px !important; margin: 3px 10px 5px 0; float: right;}
//.asside_block li:hover{ cursor: pointer; background: red;}
.clear{clear: both;}
/*ICONS*/
.img_icons{width: 100%; max-width: 25px;}
/*-- FOOTER -- */
.final_footer{ width: 100%; height: 60px; background: red;}
.final_footer p{text-align: center;}
/*-- ARTICLE -- */
.article_left{width: 70%; margin: 0 auto; padding: 0;}
.content_section{width: 100%;}
.header_article{height:75px; background:#e4e4e4 url(../images/icons-seta.png) no-repeat -5px 43px; border-left:5px solid #c83d00; }
.header_article h1{margin: 8px 35px 3px; float: left;}
.header_article p{margin: 0 60px; float: left; clear: both;}
.header_article img{ margin: 0px 5px 5px 0px; float: left;}
.content_section_video{ float: left; width:100%; height: 100%; clear: both;}
/*PROGRESS BAR*/
.progress_bar{clear: both; width: 100%; height: 10px; float: left; position:relative; bottom: 0px;}
progress{display:block; -webkit-appearance: none;}
progress::-webkit-progress-bar { background: #343434; padding: 2px;}
progress::-moz-progress-bar { background: #343434; padding: 2px;}
progress::-ms-progress-bar { background: #343434; padding: 2px;}
progress::-o-progress-bar { background: #343434; padding: 2px;}
progress::-webkit-progress-value { -webkit-border-radius: 50px; background:#c83d00;}
progress::-moz-progress-value { -moz-border-radius: 50px; background:#c83d00;}
progress::-ms-progress-value { -ms-border-radius: 50px; background:#c83d00;}
progress::-o-progress-value { -o-border-radius: 50px; background:#c83d00;}
/*-- ASIDE SIDEBAR -- */
.thumbnail{float: left; width: 90px; height: 60px; margin: 5px;}
.aside_block{width: 30%; height:100%; float:right; color: #FFF; background: #343434; overflow-y: scroll;}
.aside_block ul{ background: #343434; float: left; display: block; margin: 2px;}
.aside_block li{width: 80%; display:block; background: #e4e4e4; float: right; margin: 5px 10px;}
.aside_block h1{font-size: 14px !important; margin: 3px 10px 5px 0; float: right;}
.left_block{width: 100%; float: left;}
.left_block:hover{width: 100%; float: left; border-left:4px solid #c83d00; cursor: pointer;}
/*-- FOOTER -- */
.content_footer{width: 100%; height: 60px; background: #dbdbdb; position: relative; bottom: 0px;}
.content_footer p{text-align: center; font-size: 0.6em;}
/* -- STYLE VIDEO YOUTUBE*/
/*outro css - reset*/
*{
margin: 0;
padding: 0;
font-family:'Open Sans', sans-serif;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
html,body{height: 100%;}
/* --FONT - TEXT--*/
.fontzero{font-size: 0px !important; margin: 0 !important;}
.fontwriter{color: #D78484 !important;}
.fontblack{color:#000 !important;}
.ligth{font-weight: 300 !important;}
.bolder{font-weight: 400 !important;}
.small{font-weight: 600 !important;}
.bold{font-weight: 700 !important;}
.small-caps{font-variant: small-caps !important;}
/* -- ICONES -- */
.icons_play{background: url(../..//assets/images/play_title.png) no-repeat center left;}
/* -- FLOATS --*/
.f_left{float: left;}
.f_right{float: right;}
.f_clear{clear: both;}
article, section{
text-align: center;
}
h1{font-size: 1em; font-weight: 300;}
p{font-size: 0.8em; font-weight: 400; margin-bottom: 10px;}
img{max-width: 100%; vertical-align: middle;}
ul{ list-style: none;}
form{float: left; width: 100%; text-align: left;}
label{float: left; width: 100%; margin-bottom: 20px;}
label .text{font-size: 0.8em; text-transform: uppercase; font-weight: 600; margin-bottom: 6px; display: block; color: #fff;}