modals.html

 <!-- Portfolio Modals -->
 {% for post in site.posts %}
    <div class="portfolio-modal modal" id="portfolioModal-{{ post.modal-id }}" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-content">
            <div class="close-modal" data-dismiss="modal">
                <div class="lr">
                    <div class="rl">
                    </div>
                </div>
            </div>
            <div class="container">
                <div class="row">
                    <div class="col-sm-10 col-sm-offset-1">
                        <div class="modal-body">

                            <!-- Carousel -->
                            <div class="carousel slide" id="portfolioCarousel-{{ post.modal-id }}" data-interval="false">

                              <ol class="carousel-indicators">
                                <li data-target="#portfolioCarousel-{{ post.modal-id }}" data-slide-to="0" class="active"></li>
                                <li data-target="#portfolioCarousel-{{ post.modal-id }}" data-slide-to="1"></li>
                              </ol>

                              <div class="carousel-inner" role="listbox">
                                <div class="item active">
                                  <img src="img/portfolio/{{ post.img }}" class="img-responsive img-centered" alt="{{ post.alt }}">
                                  <div class="image-credits">Illustrations by: {{ post.img-author}} | <a href="{{ post.img-license-link }}">{{post.img-license}}</a></div>
                                </div>
                                <div class="item">
				  <video controls>
				    <source src="{{ post.webm-link }}" type='video/webm;codecs="vp8, vorbis"'/>
				    <source src="{{ post.video-link }}" type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"'/>
				    Your browser does not support the HTML5 video tag. You can <a href="{{ post.video-link }}">download a copy of the video</a>.
				  </video>
                                </div>
                              </div><!-- .carousel-inner -->

                            </div>

                            <!-- Title/Subtitle-->
                            <h2>{{ post.project-name }}</h2>
                            <h3>{{ post.institution }}</h3>

                            <!-- Carousel controls -->
                            <div class="btn-group">
                              <a class="btn btn-primary btn-green btn-left play-video" data-carousel-id="portfolioCarousel-{{ post.modal-id }}" href="#portfolioCarousel-{{ post.modal-id }}" role="button" data-slide-to="1">
                                <span><i class="fa fa-play-circle"></i> Play Video</span>
                              </a>
                              <a class="btn btn-primary btn-green btn-right" href="{{ post.oer-repository-link }}">
                                <span><i class="fa fa-external-link"></i> View Project OER</span>
                              </a>
                            </div>

                            {% assign sectionPrefix = post.title | slice: 0, 11 | downcase | replace: ' ', '' %}

                            <div class="panel-group" id="{{sectionPrefix}}" role="tablist" data-toggle="true" aria-multiselectable="true">

                              {% assign sections = post.content | split: "[end]" %}
                              {% for section in sections %}
                                {% assign even = forloop.index | modulo:2 %}
                                {% if even != 0 %}
                                  {% assign attr_title = section | strip_html %}
                                  {% assign title = section %}
                                {% else %}
                                  {% assign cont = section %}
                                {% endif %}
                                {% if even == 0 %}
                                <div class="panel panel-default">
                                  <div class="panel-heading" role="tab" id="heading-{{sectionPrefix}}-{{forloop.index}}">
                                    <div class="panel-title">
                                      <a data-toggle="collapse" data-parent="#{{sectionPrefix}}" href="#collapse-{{sectionPrefix}}-{{forloop.index}}" aria-expanded="true" aria-controls="collapse-{{sectionPrefix}}-{{forloop.index}}">
                                        {{ title }}
                                      </a>
                                    </div>
                                  </div>
                                  {% assign index = forloop.index %}
                                  {% if index == 2 %}
                                  <div id="collapse-{{sectionPrefix}}-{{forloop.index}}" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading-{{forloop.index}}">
                                  {% else %}
                                  <div id="collapse-{{sectionPrefix}}-{{forloop.index}}" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-{{forloop.index}}">
                                  {% endif %}
                                    <div class="panel-body">
                                      {{ cont }}
                                    </div>
                                  </div>
                                </div>
                                {% endif %}
                              {% endfor %}

                             </div><!-- accordion -->


                            <h4>Industry Affiliations</h4>
                            <ul class="list-inline item-details categories">
                                {% for category in post.categories %}
                                  <li class="{{ category | join: ' ' }}">{{ category }}</li>
                                {% endfor %}
                            </ul>

                            <hr>

                            <ul class="project-pager">
                              <li class="prev-project"><a href="#"><i class="fa fa-chevron-left"></i>Prev Project</a></li>
                              <li class="next-project"><a href="#">Next Project<i class="fa fa-chevron-right"></i></a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endfor %}