@extends('layouts.general')
@section('content')
      <section id="" class="container mt20 mb20">
        <div class="row">
          <div class="col-12 col-lg-10 offset-0 offset-lg-1 mt20 mb20">
            <div class="card border-success">
              <div class="card-header border-success">
                <h5 class="card-title text-success">かんたんご利用ガイド</h5>
              </div>
              <div class="card-body mt30 text-center">
                <div class="col-12 text-left row">
                  <div class="col-md-4 col-12 p-0">
                    <a href="javascript:void(0)" src="https://www.youtube.com/embed/3Aog2DLAm9g" class="load-iframe">
                      <p class="d-flex align-items-center">ユーザー登録</p>
                    </a>
                    <a href="javascript:void(0)" src="https://www.youtube.com/embed/kVytaKmw2SY" class="load-iframe">
                      <p class="d-flex align-items-center">駐輪場の契約</p>
                    </a>
                    <a href="javascript:void(0)" src="https://www.youtube.com/embed/J_NUUMjf5hA" class="load-iframe">
                      <p class="d-flex align-items-center">お支払い</p>
                    </a>
                    <a href="javascript:void(0)" src="https://www.youtube.com/embed/yynD-HlhCr0" class="load-iframe">
                      <p class="d-flex align-items-center">シール発行</p>
                    </a>
                    <a href="javascript:void(0)" src="https://www.youtube.com/embed/zPT17XhnDHE" class="load-iframe">
                      <p class="d-flex align-items-center">駐輪場検索と空き待ち予約</p>
                    </a>
                    <a href="javascript:void(0)" src="https://www.youtube.com/embed/7y4SG4C0ocw" class="load-iframe">
                      <p class="d-flex align-items-center">更新手続き</p>
                    </a>
                  </div>
                  <div class="col-md-8 col-12 p-0">
                    <iframe width="100%" height="100%" src="https://www.youtube.com/embed/3Aog2DLAm9g" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" class="video-iframe"></iframe>
                  </div>
                  <div class="col-12 p-0">
                    <p><a href="https://ebook.wisebook4.jp/view/HTML5ebook/35698/" target="_blank">テキスト版マニュアルはこちら</a></p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
      <script>
        $(document).ready(function() {
          $('.load-iframe').on('click', function() {
            let src = $(this).attr('src');
            $('.video-iframe').attr('src', src + '?autoplay=1');
          })
        })
      </script>
@endsection