how to play dynamic video in modal popup using javascript in laravel?

user_13830762 0
Viewed 3113

this my javascript, this not showing any video, just blank. im new in laravel and javascript. hope u can help me for this task. thankyou

<script>
        //open modal and play video          
        $('#myModal').on('show.bs.modal', function(event){
                var button = $(event.relatedTarget)
                var name = button.data('name')
                var link = button.data('link')
                var modal = $(this)
                modal.find('.modal-content #name').val(name);                    
                modal.find('.modal-content #playvideo').val($("#playvideo").attr('src', link););                    

            })
        //close modal and stop play video
        $("#myModal").on('hide.bs.modal', function(){
                $("#playvideo").attr('src', '');
            });            
    </script>

modal

<iframe id="playvideo" src="" frameborder="0" allowfullscreen></iframe>

button

<a data-link="{{ $vid->link }}" data-name="{{ $vid->name }}" class="fa fa-eye btn btn-alt-success" data-target="#myModal" data-toggle="modal"></a>
laravel-blade laravel javascript
2 Answers

Please Take a look the snippet. If it is not works go to the link

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of Embedding YouTube Video inside Bootstrap Modal</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
    .bs-example{
        margin: 20px;
    }
    .modal-content iframe{
        margin: 0 auto;
        display: block;
    }
</style>
<script>
$(document).ready(function(){
    /* Get iframe src attribute value i.e. YouTube video url
    and store it in a variable */
    var url = $("#cartoonVideo").attr('src');
    
    /* Assign empty url value to the iframe src attribute when
    modal hide, which stop the video playing */
    $("#myModal").on('hide.bs.modal', function(){
        $("#cartoonVideo").attr('src', '');
    });
    
    /* Assign the initially stored url back to the iframe src
    attribute when modal is displayed again */
    $("#myModal").on('show.bs.modal', function(){
        $("#cartoonVideo").attr('src', url);
    });
});
</script>
</head>
<body>
<div class="bs-example">
    <!-- Button HTML (to Trigger Modal) -->
    <a href="#myModal" class="btn btn-lg btn-primary" data-toggle="modal">Launch Demo Modal</a>
    
    <!-- Modal HTML -->
    <div id="myModal" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">YouTube Video</h4>
                </div>
                <div class="modal-body">
                    <iframe id="cartoonVideo" width="560" height="315" src="//www.youtube.com/embed/YE7VzlLtp-4" frameborder="0" allowfullscreen></iframe>
                </div>
            </div>
        </div>
    </div>
</div>     
</body>
</html>

user_83146420

please take a look at another. I am sure it is the right solution

$(document).on('click','.view-video',function(){
            console.log($(this).attr('data-link'));
            $('#myModal').modal();
            $("#playvideo").attr('src', $(this).attr('data-link'));
        })
user_83146420
Related