Html - Embed Dailymotion video to the site on AJAX success callback

StaceyKosheen
February 12, 2024
88 views
1 vote
2 Answers

I embed Dailymotion videos to the site. I tried to do it by 2 ways:

inserting as iframe. But it doesn’t provide extended functionality.

<div class="video" style="position:relative;padding-bottom:56.25%;height:0;overflow:hidden;"> <iframe class="iframe" style="width:100%;height:100%;position:absolute;left:0px;top:0px;overflow:hidden" frameborder="0" type="text/html" src="https://www.dailymotion.com/embed/video/src" width="100%" height="100%" allowfullscreen title="Dailymotion Video Player" > </iframe> </div>

inserting as script.

<script src="https://geo.dailymotion.com/player/playerid.js" data-video="src"></script>

Both work fine, when they are inserted like that in HTML code.

But I also have some scripting to show more video when you click the button. It works perfect with the iframe. As for the script, the videos are not displayed.

When I inspect the elements, I see the elements which are displayed look the following way.

<div id="dailymotion-instance-b08f5314-1268-2607-1ed5-bd6573fbb03d" class="dailymotion-player-root dailymotion-player-xpeug" style="background: rgb(13, 13, 13); padding-bottom: 56.25%; position: relative;"><div class="dailymotion-player-wrapper" style="height: 100%; overflow: hidden; position: absolute; width: 100%; margin: 1e-05px;"><iframe allow="autoplay; fullscreen; picture-in-picture" allowfullscreen="" class="dailymotion-player" frameborder="0" src="https://geo.dailymotion.com/player/playerid.html?video=src" title="Dailymotion video player - My video" height="100%" width="100%" style="opacity: 1;"></iframe></div></div>

The elements which are uploaded with ajax are not displayed and look the following way:

<script src="https://geo.dailymotion.com/player/playerid.js" data-video="src"></script>

This is my code to output more videos with scripting:

<div id="showmore-list">
   <div class="video-list">
      <?php foreach ($items as $src): ?>
      <script src="https://geo.dailymotion.com/player/playerid.js" data-video="<?php echo $src; ?>"></script>
      <?php endforeach; ?>
   </div>
</div>
<?php if ($total > $limit): ?>
<div class="showmore-bottom">
   <a data-page="<?php echo $page; ?>" data-max="<?php echo $amt; ?>" id="showmore-button" class="button btn btn-primary" href="#">Show more</a>
   <div class="spinner-border d-none" role="status">
      <span class="sr-only">Loading...</span>
   </div>
</div>
<?php endif; ?>
<script>
   $(function(){
    $('#showmore-button').click(function (){
        // Селектор контейнера с записями
        var selector = '#showmore-list .video-list'; 
    
        var $target = $(this);
        var page = $target.attr('data-page');   
        page++;
    
        $.ajax({ 
            url: '?page=' + page,  
            dataType: 'html',
            success: function(data){
                $(selector).append($(data).find(selector).html());
            },
   complete: function(){
      $(".btn.btn-primary").removeClass("d-none");
      $(".spinner-border").addClass("d-none");
   }
        });
    
        $target.attr('data-page', page);
        if (page ==  $target.attr('data-max')) {
            $target.hide();
        }
    
        return false;
    });
   });
</script>

Tags: html javascript

Answers

Chosen as BEST ANSWER

Based on the great answer of Frank John, I managed to find the solution that is fine for me.

    <script src="https://geo.dailymotion.com/libs/player.js"></script>

    success: function(data) {
            $(data).find('.video-list script').each(function(index) {
            // Extract the video source from the data-video attribute
            var videoSrc = $(this).attr('data-video');
            var iframeID = 'dailymotion-instance-' + index; // Unique ID for each player
            var div = $('<div></div>', {
                id: iframeID
            });
            // Append div to your video list
            $(selector).append(div);
            var player = dailymotion.createPlayer(iframeID, {
                video: videoSrc,
                params: {
                    autoplay: false,
                    mute: false
            },
              })
              .then((player) => console.log(player))
              .catch((e) => console.error(e));
        });
}

I would also need to resolve the issue with autoplay and some other params.

(Edit)

When you append new HTML that contains tags using jQuery .append() method (as you do in your AJAX success callback), those scripts do not execute. To execute it you can do it manually

so now in your AJAX success callback that creates an iframe for each new video instead of using a script tag you can do something like this in your success block

  success: function(data) {
    $(data).find('.video-list script').each(function(index) {
        var videoSrc = $(this).attr('data-video');
        var iframeID = 'dmplayer-' + index; // Unique ID for each player

        var iframe = $('<iframe></iframe>', {
            id: iframeID,
            frameborder: '0',
            allowfullscreen: true,
            class: 'iframe',
            style: 'width:100%; height:100%; position:absolute; left:0px; top:0px; overflow:hidden',
            title: 'Dailymotion Video Player'
        });

        var container = $('<div></div>', {
            class: 'video',
            style: 'position:relative; padding-bottom:56.25%; height:0; overflow:hidden;'
        }).append(iframe);

        $(selector).append(container);

        // Initialize the Dailymotion player with the API
        var player = DM.player(iframeID, {
            video: videoSrc,
            width: "100%",
            height: "100%",
            params: {
                autoplay: false,
                mute: false,
                queue-autoplay-next: false,
                queue-enable: false
            }
        });

        // Additional player event listeners can be added here if needed
    });
}

each iframe is created without the src attribute and is instead initialized using DM.player, which is a function provided by the Dailymotion Player API https://developers.dailymotion.com/api/

queue-autoplay-next: false – This should disable autoplay for the
next video in the queue
queue-enable: false – This disables the video queue feature, which
can also help in controlling autoplay behavior.

you can try this snippet make changes accordingly

hope it helps

Please signup or login to give your own answer.

Click here to cancel reply.

Html – Embed Dailymotion video to the site on AJAX success callback

Answers