<div ng-controller="YoutubeCtrl" ng-init="init()" class="ng-cloak" ng-cloak>
  <div id="player" class="m-player">
    <?php if(wp_is_mobile() && !is_Kindle() && !is_ipad()){ ?>
      <iframe title="YouTube video player"
              class="youtube-player"
              type="text/html"
              width="360"
              height="280"
              ng-src="{{movieUrl}}"
              frameborder="0"></iframe>
    <?php } else { ?>
      <iframe title="YouTube video player"
              class="youtube-player"
              type="text/html"
              width="560"
              height="480"
              ng-src="{{movieUrl}}"
              frameborder="0"></iframe>
    <?php } ?>
  </div>
  <div class="m-searcharea">
  	<div class="inner">
  	  <input type="search" ng-model="videoSearch.snippet.title" placeholder="タイトルから検索" size="30">
  	   <span class="right">
  	     検索結果：{{(movies | filter:videoSearch).length}}件
  	   </span>
  	</div>
  </div>

  <div class="l-blocks l-blocks-third l-video-blocks">
    <article class="block_article m_article_video" ng-repeat="mov in movies | filter:videoSearch" ng-init="movelem = mov.snippet">
      <div class="inner">
        <a ng-click="trustSrc(mov.snippet.resourceId.videoId)" href="#player">
          <div class="cover">
          	<div class="m-frame">
              <img src="<?= home_url() ?>/assets/images/frame-big.png" alt="frame">
          	</div>
          	<div class="m-outer-cover">
          		<img src="{{movelem.thumbnails.high.url}}" alt="">
          	</div>
          </div>
          <div class="cnt">
            <h1>{{movelem.title}}</h1>
            <aside class="info info-right">
              <time ng-bind="movelem.publishedAt | date: 'yyyy/MM/dd'"></time>
            </aside>
          </div>
        </a>
      </div>
    </article>
  </div>
</div>