Блог

Пожалуйста, смотрите Ниже для Jquery/API, который автоматически воспроизводится при отключении звука, но не зацикливается. Как я могу сделать видео на YouTube в цикле страниц? Кроме того, есть ли способ убедиться, что он показывает только связанные видео, если вы наведете на него курсор мыши? Я просто хочу, чтобы звук в бесконечном цикле был приглушен. Пожалуйста, и спасибо вам. Никакой другой информации в настоящее время нет.

 jQuery.noConflict();

jQuery(document).ready(function ($) {

  if($('.video-block').length != 0) {
    var script_tag = document.createElement('script');
    script_tag.src = "https://www.youtube.com/iframe_api";
    $('.video-block').prepend(script_tag);
    
    var player = {
      playVideo: function(container, videoId) {
        if (typeof(YT) == 'undefined' || typeof(YT.Player) == 'undefined') {
          window.onYouTubeIframeAPIReady = function() {
            player.loadPlayer(container, videoId);
          };
    
          $.getScript('//www.youtube.com/iframe_api');
        } else {
          player.loadPlayer(container, videoId);
        }
      },
    
      loadPlayer: function(container, videoId) {
        $('.video-block__button').hide();
        new YT.Player(container, {
          videoId: videoId,
          width: 356,
          height: 200,
          playerVars: {
            autoplay: 1,
            loop: 1,
            controls: 1,
            showInfo: 0
          },
          events: {
            'onReady': player.onPlayerReady,
          }
        });
      },

      onPlayerReady: function(e){
        /* here set mute to allow autoplay on chrome */
        e.target.setVolume(0);
        e.target.playVideo();
    }
    };
  }
  if($('#youtube_video_container').length != 0) {
    var videoId = $('#youtube_video_container').attr('video_id');
    if (videoId !== undefined amp;amp; (videoId !== "")) {

      player.playVideo("video-container", videoId);
    }
  }

  $('.responsive__btn').on('click',() => $('body').toggleClass('menu-responsive-open') );

  $('.responsive__btn').click(function(){
        $(this).toggleClass('open');
        $('.site-menu').toggleClass('open');
    });

    $(window).scrollTop() >= 25 ? $('body').addClass('scrolled') : $('body').removeClass('scrolled');

    $(window).scroll(function(){
        $(window).scrollTop() >= 25 ? $('body').addClass('scrolled') : $('body').removeClass('scrolled');
    });

  $('.testimonials-carousel__list').slick({
    dots: false,
    arrows: true,
    infinite: false,
    slidesToScroll: 1,
    prevArrow: '.slick-prev-custom',
    nextArrow: '.slick-next-custom'
  });

  $('.related_post__cont').slick({
    dots: false,
    arrows: false,
    infinite: false,
    slidesToShow: 3,
    slidesToScroll: 1,
    responsive: [
      {
        breakpoint: 770,
        settings: {
          slidesToShow: 2,
          slidesToScroll: 1
        }
      }
    ]
  });

  $(document).on('click', 'a[href^="#"]', function (event) {
      event.preventDefault();

      $('html, body').animate({
          scrollTop: $($.attr(this, 'href')).offset().top
      }, 500);
  });
  
  
  function restartVid() {
    var vid = document.getElementById('mp4-video-embbed');
    vid.currentTime = 0;
    vid.play();
  }

  if($('#mp4-video-embbed').length != 0) {
    document.getElementById('mp4-video-embbed').addEventListener("timeupdate", function(){
      var button_was_clicked  = document.getElementsByClassName('video-block__button button')[0].style.display;
      console.log(button_was_clicked);
      if (this.currentTime >= 8 amp;amp; button_was_clicked != 'none') {
        restartVid();
      }
    });
  }

  $('.video-block__button').click(function(){
    restartVid(); 
    $('#mp4-video-embbed').removeAttr('muted');
    $('#mp4-video-embbed').prop('muted', false);
    $('#mp4-video-embbed').prop('controls', true);
  
    $(this).hide();
  });

  var step = 0;
  $('.image-slide__list__item').hover(function(){
    var item_number = $(this).attr('data-item');
    var item_number = parseFloat(item_number);

    var dif = step - item_number;
    step = item_number;
    $('.image-slide__carousel__item').each(function(){
      var item_number_item = $(this).attr('data-item');
      var item_number_item = parseFloat(item_number_item);
      $(this).attr('data-item',item_number_item dif);
    })
    
  })


});