Cloudinary Blog Post - Part 1

home.client.view.html

<div class="container">
  <div class="panel panel-default">
    <div class="panel-heading">Recommended</div>
    <div class="panel-body">
      <div class="row">
        <div class="col-sm-4">
          <h5>PHP Programming</h5>
          <!-- 4:3 aspect ratio -->
          <div class="embed-responsive embed-responsive-4by3">
            <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/7TF00hJI78Y"></iframe>
          </div>
        </div>

        <div class="col-sm-4">
          <h5>Bahd Baddo Baddest</h5>
          <div class="embed-responsive embed-responsive-4by3">
            <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/n-AvAxGji6c"></iframe>
          </div>
        </div>

        <div class="col-sm-4">
          <h5>Funniest Red Cards in Football</h5>
          <div class="embed-responsive embed-responsive-4by3">
            <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/SkRTGx46Iz4"></iframe>
          </div>
        </div>
      </div>

     <hr />

      <div class="row">
        <div class="col-sm-4">
          <h5>Simi - Love Don't Care Official Video</h5>
          <!-- 4:3 aspect ratio -->
          <div class="embed-responsive embed-responsive-4by3">
            <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/YthMTby33d8"></iframe>
          </div>
        </div>

        <div class="col-sm-4">
          <h5>Kevin Hart annoys David Beckham</h5>
          <div class="embed-responsive embed-responsive-4by3">
            <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/WqCQq31ORFk"></iframe>
          </div>
        </div>

        <div class="col-sm-4">
          <h5>Jay-Jay Okocha Magic moments </h5>
          <div class="embed-responsive embed-responsive-4by3">
            <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/LTj2lnFo-Dk"></iframe>
          </div>
        </div>
      </div>
    </div>
  </div>
    <div class="panel-footer text-center">
      <ul class="list-inline">
        <li><i class="ion-star"></i> stars</li>
        <li><i class="ion-fork-repo"></i> forks</li>
        <li><i class="ion-pull-request"></i> issues</li>
      </ul>
    </div>
  </div>
</div>
<div class="text-center">
  <a class="btn btn-default" href="https://github.com/goodheads/yourtube"><i class="ion-social-github"></i> GitHub project</a>
  <a class="btn btn-default" href="https://github.com/goodheads/yourtube/issues/new"><i class="ion-bug"></i> Report issue</a>
</div>
</div>