Enable video autoplay

Kirby 3 Solved ✅
1

Hello,

Kirby 3 does not permit autoplay for embedded videos. I read an older entry about it. Is there anyway to get around this problem? It is very vital for me. I am building a site with around 30 films. :slight_smile:

I am using the js code below. The video modal window opens up in Kirby but does not autoplay.

I would really appreciate your help.

Best,

Nedim

indent preformatted text by 4 spaces|   Remodal [video lightbox]

-----------------------------------------------*/

spUtils.$document.ready(function () {
  var $videoModals = $('.video-modal');

  if ($videoModals.length) {
    spUtils.$body.after("\n      <div id='videoModal' class='remodal remodal-video'>\n        <button data-remodal-action='close' class='remodal-close'></button>\n        <div class='embed-responsive embed-responsive-16by9'>\n          <div id='videoModalIframeWrapper'></div>\n        </div>\n      </div>\n    ");
    var $videoModal = $('#videoModal').remodal();
    var $videoModalIframeWrapper = $('#videoModalIframeWrapper');
    $videoModals.each(function (index, value) {
      $(value).on('click', function (e) {
        e.preventDefault();
        var $this = $(e.currentTarget);
        var ytId = $this.attr('href').split('/');
        var start = $this.data('start');
        var end = $this.data('end');

        if (ytId[2] === 'www.youtube.com') {
          $videoModalIframeWrapper.html("<iframe id='videoModalIframe' src='//www.youtube.com/embed/" + ytId[3].split('?v=')[1] + "?rel=0&amp;autoplay=1&amp;enablejsapi=0&amp;start=" + start + "&ampend=" + end + "' allowfullscreen' frameborder='0' class='embed-responsive-item hide'></iframe>");
        } else if (ytId[2] === 'vimeo.com') {
          $videoModalIframeWrapper.html("<iframe id='videoModalIframe' src='https://player.vimeo.com/video/" + ytId[3] + "?autoplay=1&title=0&byline=0&portrait=0 ?autoplay=1&title=0&byline=0&portrait=0 hide'></iframe>");
        }

        $videoModal.open();
      });
    });
    spUtils.$document.on('closed', '.remodal', function (e) {
      var $this = $(e.currentTarget);

      if ($this.attr('id') === 'videoModal') {
        $videoModalIframeWrapper.html('');
      }
    });
  }
});
2

Forgot to mention: the video-modal works without Kirby, (static, with html, css, js).

3

I would like to point out that the good browsers fortunately ignore such settings as “autoplay”.

1 Like
4

Thanks for your comment HeinerEF. I myself am also not fond of autoplaying videos. I forgot to mention that a button triggers the video-modal to open up and play in this project. It is just a nuisance when you have to click the button first and then the YouTube or Vimeo video in the modal once again.

Best,

Nedim

5

Where did you find the information about Kirby preventing autoplay? You are not using any Kirby code here, so I’m wondering… Is you project online somewhere?

6

Dear texnixe,

Upon reading your reply, I tested the results on the server. Everything works fine. This autoplay issue must have something to do with my local configuration. I’m terribly sorry for disturbing.

For your information, here’s where I read about Vimeo links and Kirby. As I already mentioned, the thread is old:

Although the links don’t work, here are two identical pages, the first one is rendered through Kirby, the second one is static. Only the video links work, other links lead you nowhere:

https://testing.nedimhazar.de/zuflucht-am-bosporus

https://testing.nedimhazar.de/static-page.html

Best,

Nedim

7

Dear Nedim,

both videos play for me without problems. The link you posted was referring to an old plugin for Kirby 2, so it’s not really relevant in this context.

I hope you can find the problem you have in your local setup. I have no idea what could be causing this.

8

As you said, it works online and that’s the important thing. It is not necessary for me to have it locally.

Thank you

Nedim