<?php include("layouts/header.php") ?>
<!-- START VIDEO LECTURES PAGE -->

<div class="video-lecture">
  <div class="container">
    <h2> Video Lectures </h2>
    <div class="row justify-content-center">

      <div class="video-lecture-item col-lg-4">
        <iframe height="250" src="https://www.youtube.com/embed/9zM_auhTwHs" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        <div class="video-lecture-info">
          <div class="title"> <span> Title: </span> Video lecture 1  </div>
          <div class="video-lecture-txt">  
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
          </div>

          <!-- BUTTON TRIGGER MODAL -->
          <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#videoLec-1">
            View Lecture
          </button>

          <!-- MODAL -->
          <div class="modal fade" id="videoLec-1" tabindex="-1" aria-labelledby="vedioLecLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-xl">
              <div class="modal-content">
                <div class="modal-header">
                  <h4 class="modal-title" id="videoLecLabel">Video Lecture 1</h4>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>
                <div class="modal-body">
                  <iframe height="250" src="https://www.youtube.com/embed/9zM_auhTwHs" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                </div>
              </div>
            </div>
          </div>

        </div>
      </div>

      <div class="video-lecture-item col-lg-4">
        <iframe height="250" src="https://www.youtube.com/embed/9zM_auhTwHs" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        <div class="video-lecture-info">
          <div class="title"> <span> Title: </span> Video lecture 2  </div>
          <div class="video-lecture-txt">  
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
          </div>

          <!-- BUTTON TRIGGER MODAL -->
          <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#videoLec-2">
            View Lecture
          </button>

          <!-- MODAL -->
          <div class="modal fade" id="videoLec-2" tabindex="-1" aria-labelledby="vedioLecLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-xl">
              <div class="modal-content">
                <div class="modal-header">
                  <h4 class="modal-title" id="videoLecLabel">Video Lecture 2</h4>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>
                <div class="modal-body">
                  <iframe height="250" src="https://www.youtube.com/embed/9zM_auhTwHs" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                </div>
              </div>
            </div>
          </div>

        </div>
      </div>

      <div class="video-lecture-item col-lg-4">
        <iframe height="250" src="https://www.youtube.com/embed/9zM_auhTwHs" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        <div class="video-lecture-info">
          <div class="title"> <span> Title: </span> Video lecture 3  </div>
          <div class="video-lecture-txt">  
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
          </div>

          <!-- BUTTON TRIGGER MODAL -->
          <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#videoLec-3">
            View Lecture
          </button>

          <!-- MODAL -->
          <div class="modal fade" id="videoLec-3" tabindex="-1" aria-labelledby="vedioLecLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-xl">
              <div class="modal-content">
                <div class="modal-header">
                  <h4 class="modal-title" id="videoLecLabel">Video Lecture 3</h4>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>
                <div class="modal-body">
                  <iframe height="250" src="https://www.youtube.com/embed/9zM_auhTwHs" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                </div>
              </div>
            </div>
          </div>

        </div>
      </div>

      <div class="video-lecture-item col-lg-4">
        <iframe height="250" src="https://www.youtube.com/embed/9zM_auhTwHs" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        <div class="video-lecture-info">
          <div class="title"> <span> Title: </span> Video lecture 4 </div>
          <div class="video-lecture-txt">  
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
          </div>

          <!-- BUTTON TRIGGER MODAL -->
          <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#videoLec-4">
            View Lecture
          </button>

          <!-- MODAL -->
          <div class="modal fade" id="videoLec-4" tabindex="-1" aria-labelledby="vedioLecLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-xl">
              <div class="modal-content">
                <div class="modal-header">
                  <h4 class="modal-title" id="vedioLecLabel">Video Lecture 4</h4>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>
                <div class="modal-body">
                  <iframe height="250" src="https://www.youtube.com/embed/9zM_auhTwHs" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                </div>
              </div>
            </div>
          </div>

        </div>
      </div>

      <div class="video-lecture-item col-lg-4">
        <iframe height="250" src="https://www.youtube.com/embed/9zM_auhTwHs" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        <div class="video-lecture-info">
          <div class="title"> <span> Title: </span> Video lecture 5 </div>
          <div class="video-lecture-txt">  
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
          </div>

          <!-- BUTTON TRIGGER MODAL -->
          <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#videoLec-5">
            View Lecture
          </button>

          <!-- MODAL -->
          <div class="modal fade" id="videoLec-5" tabindex="-1" aria-labelledby="vedioLecLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-xl">
              <div class="modal-content">
                <div class="modal-header">
                  <h4 class="modal-title" id="vedioLecLabel">Video Lecture 5</h4>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>
                <div class="modal-body">
                  <iframe height="250" src="https://www.youtube.com/embed/9zM_auhTwHs" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                </div>
              </div>
            </div>
          </div>

        </div>
      </div>

      <div class="video-lecture-item col-lg-4">
        <iframe height="250" src="https://www.youtube.com/embed/9zM_auhTwHs" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        <div class="video-lecture-info">
          <div class="title"> <span> Title: </span> Video lecture 6 </div>
          <div class="video-lecture-txt">  
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
          </div>

          <!-- BUTTON TRIGGER MODAL -->
          <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#videoLec-6">
            View Lecture
          </button>

          <!-- MODAL -->
          <div class="modal fade" id="videoLec-6" tabindex="-1" aria-labelledby="vedioLecLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-xl">
              <div class="modal-content">
                <div class="modal-header">
                  <h4 class="modal-title" id="vedioLecLabel">Video Lecture 6</h4>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>
                <div class="modal-body">
                  <iframe height="250" src="https://www.youtube.com/embed/9zM_auhTwHs" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                </div>
              </div>
            </div>
          </div>

        </div>
      </div>

      <div class="video-lecture-item col-lg-4">
        <iframe height="250" src="https://www.youtube.com/embed/9zM_auhTwHs" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        <div class="video-lecture-info">
          <div class="title"> <span> Title: </span> Video lecture 7 </div>
          <div class="video-lecture-txt">  
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
          </div>

          <!-- BUTTON TRIGGER MODAL -->
          <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#videoLec-7">
            View Lecture
          </button>

          <!-- MODAL -->
          <div class="modal fade" id="videoLec-7" tabindex="-1" aria-labelledby="vedioLecLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-xl">
              <div class="modal-content">
                <div class="modal-header">
                  <h4 class="modal-title" id="vedioLecLabel">Video Lecture 7</h4>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>
                <div class="modal-body">
                  <iframe height="250" src="https://www.youtube.com/embed/9zM_auhTwHs" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                </div>
              </div>
            </div>
          </div>

        </div>
      </div>

      <div class="video-lecture-item col-lg-4">
        <iframe height="250" src="https://www.youtube.com/embed/9zM_auhTwHs" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        <div class="video-lecture-info">
          <div class="title"> <span> Title: </span> Video lecture 8 </div>
          <div class="video-lecture-txt">  
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
          </div>

          <!-- BUTTON TRIGGER MODAL -->
          <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#videoLec-8">
            View Lecture
          </button>

          <!-- MODAL -->
          <div class="modal fade" id="videoLec-8" tabindex="-1" aria-labelledby="vedioLecLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-xl">
              <div class="modal-content">
                <div class="modal-header">
                  <h4 class="modal-title" id="vedioLecLabel">Video Lecture 8</h4>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>
                <div class="modal-body">
                  <iframe height="250" src="https://www.youtube.com/embed/9zM_auhTwHs" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                </div>
              </div>
            </div>
          </div>

        </div>
      </div>

      <div class="video-lecture-item col-lg-4">
        <iframe height="250" src="https://www.youtube.com/embed/9zM_auhTwHs" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        <div class="video-lecture-info">
          <div class="title"> <span> Title: </span> Video lecture 9 </div>
          <div class="video-lecture-txt">  
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
          </div>

          <!-- BUTTON TRIGGER MODAL -->
          <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#videoLec-9">
            View Lecture
          </button>

          <!-- MODAL -->
          <div class="modal fade" id="videoLec-9" tabindex="-1" aria-labelledby="vedioLecLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-xl">
              <div class="modal-content">
                <div class="modal-header">
                  <h4 class="modal-title" id="vedioLecLabel">Video Lecture 9</h4>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>
                <div class="modal-body">
                  <iframe height="250" src="https://www.youtube.com/embed/9zM_auhTwHs" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                </div>
              </div>
            </div>
          </div>

        </div>
      </div>

      <!-- START PAGINATION -->

      <nav class="video-lec-pagination" aria-label="Page navigation video-pagination col-md-12">
        <ul class="pagination">
          <li class="page-item"><a class="page-link" href="#"> <i class="fas fa-caret-left"></i> </a></li>
          <li class="page-item active"><a class="page-link " href="#">1</a></li>
          <li class="page-item"><a class="page-link" href="#">2</a></li>
          <li class="page-item"><a class="page-link" href="#">3</a></li>
          <li class="page-item"><a class="page-link" href="#"> <i class="fas fa-caret-right"></i> </a></li>
        </ul>
      </nav>

      <!-- END PAGINATION -->

    </div>
  </div>
</div>

<!-- END VIDEO LECTURES PAGE -->
<?php include("layouts/footer.php") ?>