Loading function on .click

Question

I have a problem to understand where do I need to put resizeBg(); to make it work. For example when user click button ( btnNext ) it calls loadVideo and on event ready resizeBg() need to be called again. But console don't show me anything

And code example:

var instance = Plyr.setup('.js-player', {
        controls: [],
        loop: { active: true },
        debug: false,
        autoplay: true,
        clickToPlay: false
    });
    var player = instance[0],
    index = 0,
    videoCount = video_list.length;
    player.source = {
        type: 'video',
        sources: [
          {
            src: video_list[index].src,
            provider: 'vimeo',
          }
        ]
    },
    video_title = $('.video-title').text(video_list[index].title),
    player.on('ready', function () {
        player.volume = 0;
        resizeBg();
    },
    btnPrev = $('.home-video-direction .prev').click(function (event) {
        event.preventDefault();
        if ((index - 1) > -1) {
            index--;
            loadVideo(index);
        } else {
            index = videoCount - 1;
            loadVideo(index);
        }
    }),
    btnNext = $('.home-video-direction .next').click(function (event) {
        event.preventDefault();
        if ((index + 1) < videoCount) {
            index++;
            loadVideo(index);
        } else {
            index = 0;
            loadVideo(index);
        }

    }),
    loadVideo = function (id) {
        player.source = {
            type: 'video',
            sources: [
              {
                src: video_list[id].src,
                provider: 'vimeo',
              }
            ]
        },
        video_title = $('.video-title').text(video_list[id].title),
        index = id;
        Plyr.setup();
        player.on('ready', function () {
            player.volume = 0;
            resizeBg();
        })
    });

}

var theWindow        = $(window),
    $bg              = $(".video-intro .plyr__video-wrapper"),
    aspectRatio      = 1.77777777778;

function resizeBg() {
    var w_H = theWindow.height(),
            w_W = theWindow.width(),
            sum = w_W / w_H;
    if ( (w_W / w_H) < aspectRatio ) {
        $bg
            .removeClass('bgwidth')
            .addClass('bgheight')
            .css({
                    width: (w_H * aspectRatio),
                    left: (w_W - (w_H * aspectRatio)) / 2
                });
    } else {
        $bg.removeClass('bgheight').addClass('bgwidth');
    }



theWindow.resize(resizeBg).trigger("resize");

I get a different kind of error with a link to a wall of text: https://developers.google.com/web/updates/2017/09/autoplay-policy-changes — Jan Andersen, Sep 08 '18 at 09:41
Hi @JanAndersen, yes, but I don't think that error effect this function, because, on load, a video is showing, and also have a value that function gave him (width and height) — Stefan, Sep 08 '18 at 12:30
You have a class called "plyr__video-embed" which is set to height: 0 and no width specification. Setting it manually in Chrome inspect to width: 100% and height: 100% shows the video and continue to work for all navigation. I just don't see where you set that. — Jan Andersen, Sep 08 '18 at 12:54
@JanAndersen `.plyr__video-embed` have an inline `width` and `left`. that is my dynamic and function `resizeBg()` is doing that part. Also same `div` getting class `.bgheight` or `.bgwidth` by checking aspectRatio that is 16:9. By default, yes, that div has `height: 0;` and that is from plugin CSS. But when you click next, plugin reinit all markup and delete all classes and inline styles. That is why I need to call function `resizeBg()` one more time on that click, to get that styles — Stefan, Sep 09 '18 at 10:21

score 0 · Answer 1 · answered Sep 12 '18 at 20:43

I found a mistake that I made. Basically is DOM. I put these variables out of function

var theWindow        = $(window),
    $bg              = $(".video-intro .plyr__video-wrapper"),
    aspectRatio      = 1.77777777778;

Because they are attached on prev DOM element. $bg exist, but it was not point on new DOM element that plugin add after loading video data on .click

So this function need to look like this

function resizeBg() {
        var theWindow        = $(window),
            $bg              = $(".video-intro .plyr__video-wrapper"),
            aspectRatio      = 1.77777777778,
            w_H = theWindow.height(),
            w_W = theWindow.width(),
            sum = w_W / w_H;

        if ( (w_W / w_H) < aspectRatio ) {
            $bg
                .removeClass('bgwidth')
                .addClass('bgheight')
                .css({
                        width: (w_H * aspectRatio),
                        left: (w_W - (w_H * aspectRatio)) / 2
                    });
        } else {
            $bg.removeClass('bgheight').addClass('bgwidth');
        }

Loading function on .click

1 Answers1