Ionic : ion-content + ion-list, how to have static div and scrollable list together?

I have view like on the image below:

enter image description here

I would like to have video container non scrollable (static), but list under the video container should be scrollable.

How can i do it please in Ionic framework?

I tried to set absolute position to the video container and place list above the container. But if i'm scrolling in list, video is moving too.

Many thanks for any help:

Template is here: 

<ion-view title="{{ 'TIMELAPSE_VIDEOS' | translate }}"
          ng-controller="VideoCtrl as controller">
    <ion-nav-buttons side="left">
        <button menu-toggle="left"class="button button-icon icon ion-navicon"></button>
    </ion-nav-buttons>
    <ion-nav-buttons side="right">
      <button ng-click="toggleFullScreen()" menu-toggle="left"
              class="button button-icon icon ion-arrow-expand"></button>
    </ion-nav-buttons>
    <ion-content class="has-header aboutAppContent" >

      <div class="videogular-container">
        <videogular vg-player-ready="controller.onPlayerReady($API)"
                    vg-loop="controller.config.loop"
                    vg-theme="controller.config.theme.url">
          <vg-media vg-src="controller.config.sources"
                    vg-tracks="controller.config.tracks">
          </vg-media>

          <vg-controls>
            <vg-play-pause-button></vg-play-pause-button>
          </vg-controls>

          <vg-buffering></vg-buffering>
          <vg-poster vg-url='controller.config.plugins.poster'></vg-poster>
        </videogular>
      </div>


      <div class="list" id="videoListWrappper">
        <a class="item item-thumbnail-left"
           ng-repeat="timelapseVideo in availableTimelapseVideos">
          <div class="menuItemcircle">
            <div class="menuItemcircleIconBtn">
              <button ng-click="controller.setVideo($index)"  class="button button-icon icon ion-play customIconSound"></button>
            </div>
          </div>
          <h2 class="customHeadingForTrackName">{{timelapseVideo.name}} </h2>
          <h3 class="customHelpText">{{ 'TAP_TO_PLAY_VIDEO' | translate }}</h3>
        </a>
      </div>
      </div>
    </ion-content>
</ion-view>

I just had the same problem but instead of having a video container, I had a search box.

I solved like this, the template:

<ion-view hide-back-button="true" view-title="Buzón de Mensajes" class="buzon-page">
  <ion-nav-buttons side="right">
    <button class="button button-icon icon ion-android-exit" ng-click="cerrarSesion()">
    </button>
  </ion-nav-buttons>

  <!-- non scrollable (static) search box -->
  <div class="list list-inset" >
    <label class="item item-input">
      <i class="icon ion-search placeholder-icon"></i>
        <input type="text" placeholder="Buscar">
    </label>
  </div>

  <!-- scrollable (dynamic) list -->
  <ion-content class="ionc">
    <ion-list>
      <ion-item ng-repeat="mensaje in mensajes" class="item" ng-click="abrirMensaje($index)" on-hold="mostrarMenu(mensaje, $index)">
        <h2><b>{{ mensaje.hid }}</b></h2>
        <h3>{{ mensaje.alert }}</h3>
        <p class="cont">{{ mensaje.mens }}</p>
        <p class="fecha">{{ mensaje.fecha }}</p>
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>

And de CSS in the style.css file:

/* non scrollable (static) search box */
.buzon-page label{
  margin-top: 40px;
  border:2px solid #C0C0C0;
}

/* scrollable (dynamic) list */
.buzon-page .ionc{
  margin-top: 80px;
}

The 40px top margin for the static content is because without it the box displays under the nav-bar. I hope it works with a video container as well.