Ogestan_Drossagyn_Papilocare/Drossagyn/contenido/03.html

<style>
  .fake {
    background-image: url(img/bg04.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }

  .play-button-container {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    z-index: 10002;
    /* background: linear-gradient(180deg, #634577, #813e70); */
    border-radius: 10px;
    box-shadow: 0px 0px 10px 0px #d0f0ff;
  }

  #video {
    z-index: 99;
    border-radius: 15px;
  }


  .play-button-container button {
    pointer-events: all;
    border: none;
    background: none;
    border: solid 3px #fff;
    padding: 10px 18px !important;
    border-radius: 90px;
  }

  h1 .fa-regular {
    background: linear-gradient(45deg, #ffffff, #ffffff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 500;
    left: 0px;
    position: relative;
    font-size: 25px;
  }


  @media(min-width: 768px) {
    .content-gls {
      position: absolute;
      top: 0;
      left: 0;
    }

    .play-button-container button {
      pointer-events: all;
      border: none;
      background: none;
      border: solid 8px #fff;
      padding: 15px 30px !important;
      border-radius: 90px;
    }

    h1 .fa-regular {
      background: linear-gradient(45deg, #ffffff, #ffffff);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      font-weight: 500;
      left: 10px;
      position: relative;
      font-size: 111px;
    }
  }
</style>
<div class='page-sco'>
  <div class='container'>
    <div class='row justify-content-center align-items-center'>
      <div class='col-12'>
        <div class='row justify-content-center'>
          <div class="col-12 text-center animate__animated animate__rotateInDownRight">
            <h2 class="my-0 text-secondary fw-bold">Mecanismo de acción</h2>
          </div>
          <div class="col-12 col-md-10 col-lg-6 animate__animated animate__zoomIn my-3">
            <div class="w-100">
              <div class="ratio ratio-16x9">
                <video id="video" class="embed-responsive-item" controls autoplay poster="video/poster.jpg">
                  <source src="video/dummy.mp4" type="video/mp4" />
                  Your browser does not support the video tag.
                </video>
                <div class="play-button-container">
                  <button class="p-0 animate__animated animate__heartBeat animate__infinite waves-effect disabled"
                    id="btn_video">
                    <h1 class="my-0"><i class="fa-regular fa-play fa-3x text-green-1"></i></h1>
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script>
  $(function () {
    "use strict";
    $('.page-sco').addClass('fake');
    $('#scroll-indicator').css('display', 'none');


    setTimeout(function () {
      $("#btn_video").removeClass("disabled");
      $(".i0").show();
    }, 200);

    var video = document.getElementById("video");
    var btnVideo = document.getElementById("btn_video");

    video.play();
    video.addEventListener("play", function () {
      $(".play-button-container").hide(); // Ocultar el contenedor de botón de reproducción
    });
    // Evitar la reproducción del video al hacer clic end el botón de reproducción
    btnVideo.addEventListener("click", function (event) {
      if (!btnVideo.classList.contains("disabled")) {
        //CourseNav.soundClick();
        document.getElementById("video").play();
        $(".play-button-container").hide(); // Ocultar el contenedor de botón de reproducción
      } else {
        event.stopPropagation(); // Evita que el evento de clic llegue al video
      }
    });

    // Evitar que el video se reproduzca al hacer clic en el área de la capa
    video.addEventListener("click", function (event) {
      if (!btnVideo.classList.contains("disabled")) {
        event.preventDefault(); // Evita la acción predeterminada de reproducción del video
      }
    });

    // Evitar la reproducción del video al hacer doble clic en cualquier parte del video
    video.addEventListener("dblclick", function (event) {
      if (!btnVideo.classList.contains("disabled")) {
        event.preventDefault(); // Evita la acción predeterminada de reproducción del video
      }
    });

    video.addEventListener("ended", function () {
      $('.i0').hide();
      CourseNav.setSlideVisited();
    });
  });
</script>