---
layout: layout
title: "Watch Out!, IIT Roorkee"
---
{% include header.html %}

<div id="featured-articles-container" class="container">
  <h1 class="container-title">Featured Articles</h1>
  <div class="row">
    <div id="featured-articles" class="col-md-8">
      {% for cat in site.data.homepage_categories.featured_articles %}
      {% for post in site.categories[cat] %}
      {% if post.image != null %}
        {% include horizontal_post.html post=post %}
      {% break %}
      {% endif %}
      {% endfor %}
      {% endfor %}
    </div>
    <div class="col-md-4">
      <div class="fb-page" data-href="https://www.facebook.com/watchoutiitr/" data-tabs="timeline" data-width="330" data-height="540" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><blockquote cite="https://www.facebook.com/watchoutiitr/" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/watchoutiitr/">Watch Out! News Agency</a></blockquote></div>
    </div>
  </div>
</div>

<div id="yt-videos-container" class="container">
  <h1 class="container-title">Videos</h1>
  <div class="row">
    <div class="col-md-8">
      {% assign video = site.data.youtube.first %}
      <div class="video-container">
        <div class="embed-responsive embed-responsive-16by9">
          <iframe class="youtube-video" id="youtube-video-{{ video.id }}" data-id="{{ video.id }}" src="https://www.youtube.com/embed/{{ video.id }}?enablejsapi=1&showinfo=0" allowfullscreen></iframe>
        </div>
      </div>
      <div class="video-caption" id="youtube-title-{{ video.id }}" data-id="{{ video.id }}">
        <h2 class="caption">{{ video.title }}</h2>
      </div>
    </div> <!-- col-md-8 -->
    <ul class="col-md-4 video-list">
      {% for video in site.data.youtube offset: 1 limit: 4 %}
        <li class="row list-video">
          <a href="https://www.youtube.com/watch?v={{ video.id }}">
            <div class="col-md-6 img-container">
              <img class="center-both img-center-fill" src="http://img.youtube.com/vi/{{ video.id  }}/mqdefault.jpg">
            </div>
            <div class="col-md-6 caption"><span class="center-vertical">{{ video.title }}</span></div>
          </a>
        </li>
      {% endfor %}
    </ul>
  </div> <!-- row -->
</div>