index.html

---
layout: default
---

<style>
.latest-sermon {
  position: relative;
}
.latest-sermon img {
  width: 100%;
}
.latest-sermon-text {
  position: absolute;
  width: 100%;
  height: 100%;
  bottom: 0;
  left: 0;
  background-color: rgba(50, 50, 50, 0.6);
  color: #FFF;
  padding: 10px;
}
</style>

{% include slider.html %}

<div class="container">
  <div class="row">
    <div class="col-sm-1"></div>
    <div class="col-sm-10">
    </div>
    <div class="col-sm-1"></div>
  </div>
</div>
<div class="container">
  <div class="row">
    <div class="col-sm-4">
      {% include bannerHeader.html children='Welcome!' %}
      <p>We’re a <span style="color: #000000;">Bible based church</span> in Riverton, Utah. We would love for you to <a title="I’m New" href="{{ site.baseurl }}/visit/">visit us</a>!</span></p>
    </div>
    <div class="col-sm-4">
      {% include bannerHeader.html children='Latest Message' %}
      {% assign sermons = (site.sermons | sort: 'date') | reverse %}
      {% for post in sermons limit:1 %}
        <div class="latest-sermon">
          <a href="{{ site.baseurl }}{{ post.url}}">
            <img id="youtube-{{ post.youtubeId }}" src="{{ site.baseurl }}/assets/images/defaultLatestMessage.gif" alt="{{ video.title }}" />
            <div class='latest-sermon-text'>
              <h4>{{ post.title }}</h4>
              {{ post.verse }}
            </div>
          </a>
        </div>
        <script>
          $(document).ready(function() {
            loadYoutubeThumbnail('{{ post.youtubeId }}');
          });
        </script>
      {% endfor %}
    </div>
    <div class="col-sm-4">
      {% include events.html title="Upcoming Events" category="churchwide" %}
    </div>
  </div>
</div>
<script>
function loadYoutubeThumbnail(id){
  var imageId = "#youtube-";
  if (id) {
    var url = "http://img.youtube.com/vi/" + id + "/0.jpg";
    imageId += id;
    var imageId = "#youtube-" + id;

    $(imageId).attr('src', url);

  } else {
    $(imageId).attr('src', '/assets/uploads/pages/benPreaching.jpg');
  }
}
</script>