video-program/modules/video_program/show.html.erb

<style type="text/css">
  .btn.disabled {
    pointer-events: none;
    cursor: default;
    background-image: unset;
    background-color: #292929;
  }
  a.play-btn {
    padding: 1em 2.5em;
    background: #333;
    color: #fff;
    border-radius: 20em;
    font-size: 1em;
  }
  a.play-btn:hover {
    color: #fff;
    font-size: 1.1em;
  }
  .video-description {
    margin: 1em 0;
  }
  .video-information-wrap {
    font-size: 1.2em;
  }
  .video-short-description {
  }
  .video-cover-image-wrap {
    padding: 0 1em;
  }
  .video-cover-image-wrap img {
    border-radius: 5em;
  }
  .clearfix {
    clear: both;
  }
  .episode_tag {
    font-size: 1.2em;
    background: none;
    color: inherit;
    padding-left: 0;
    font-weight: normal;
  }
  .episode_title {
    font-size: 1.3em;
    font-weight: bolder;
  }
  .carousel_images{
    {{carousel_display_style}}
  }
  .episode_item {
    margin-bottom: 1em;
  }
  #episodes-head-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
  #episodes-head, #episodes_tag_box {
    float: left;
    vertical-align: middle;
  }
  #episodes-head {
    margin-top: 0.625em;
    margin-right: 0.5em;
  }
  .episodes_albums-list {
    padding: 0;
  }
  @media (max-width: 768px) {
    .episode_item {
      padding: 0;
    }
  }
</style>
<article class="s-video-program show-video-program ">
  <div class="video-short-description col-md-5 col-xs-12">
    {{video_image_html}}
    <a target="_blank" href="{{video_external_link}}" class="btn play-btn {{video_external_link_class}}" title="{{play-head}}">
      {{play-head}}
      <i class="fa fa-play"></i>
    </a>
    <p class="video-description">{{subtitle}}</p>
    <h2 class="s-video-program__show-title">
      {{title}}
    </h2>
    <span class="video-information-wrap">
      <span class="s-video-program__tag-wrap s-video-program__meta--item ">
        <span data-list="tags" data-level="0">
          <a href="{{url}}"><span class="s-video-program__tag label label-default">{{tag}}</span></a>
        </span>
      </span>
      <span class="video-information">{{video_notes}}</span>
    </span>
  </div>
  <div class="video-cover-image-wrap col-md-7 col-xs-12">
    {{image_html}}
  </div>
  <div class="clearfix"></div>

  <section class="s-video-program_notes-wrap">
    <h3>{{program_notes-head}}</h3>
    <p clas="program_notes">
      {{program_notes}}
    </p>
  </section>

  <section class="s-video-actor_notes-wrap {{actor_notes_class}}">
    <h3>{{actor_notes-head}}</h3>
    <p clas="actor_notes">
      {{actor_notes}}
    </p>
  </section>

  <section class="s-video-stage-photo-wrap {{carousel_image_class}}">
    <h3>{{carousel_image-head}}</h3>
    {{video_program_carousel_images}}
  </section>

  <section class="s-video-episodes_albums-wrap {{episodes_albums_class}}">
    <div id="episodes-head-wrap">
      <h3 id="episodes-head">{{episodes_albums-head}}</h3>
      <select id="episodes_tag_box" data-list="episodes_albums" data-level="0">
        <option value="{{tab-index}}">{{images_tag}}</option>
      </select>
    </div>
    <div class="episodes_albums-list-wrap tab-content" data-list="episodes_albums" data-level="0">
      <ul class="episodes_albums-list col-sm-12 tab-pane fade {{tab-class}}" data-list="images" data-level="1">
        <li class="episode_item col-xs-12 col-sm-4">
          <span class="episode_tag label label-default" data-list="img-tags" data-level="2">
            {{tag}}
          </span>
          <div class="clearfix"></div>
          <h3 class="episode_title">{{ep_title}}</h3>
          <p class="episode_description">{{ep_desc}}</p>
          <img src="{{img-src}}" alt="{{ep_title}}">
        </li>
      </ul>
      <div class="clearfix"></div>
    </div>
  </section>
  <script type="text/javascript">
    $("#episodes_tag_box").change(function(){
      var tab_panes = $(".episodes_albums-list.tab-pane");
      tab_panes.removeClass("active in").eq(parseInt($(this).val())).addClass('active in');
    })
  </script>
</article>
{{link_to_edit}}