Question

我正在用django创建一个网站。我要在创建的弹出式灯箱中显示每个产品的三个视频。这些视频托管在一个视频托管网站中，该网站为我提供了以下嵌入视频的代码：

<div id="15508242266959758">
    <script type="text/JavaScript" src="https://www.aparat.com/embed/bgUL5?data[rnddiv]=15508242266959758&data[responsive]=yes">
    </script>
</div>

这是我拥有的代码：

<script>                                                                                
{% for course in course_list %}                                                         
var {{course.id}}_lect = '{{ course.lecturar.teaserHTML|safe }}';                       
var {{course.id}}_course = '{{ course.teaserHTML|safe }}';                              
var {{course.id}}_sample = '{{ course.sampleLectureHTML|safe }}';                       
{% endfor %}                                                                            
function popitup(teaser){                                                               
    $("#popup-content").prepend(teaser);                                                
}                                                                                       
</script>

以下是应该打开视频的按钮之一：

<button type="button" class="teaser-btn" id="popup_lect_{{course.id}}" onclick='popitup({{course.id}}_lect)'>

以下是弹出式HTML：

<div id="popup">                                                                        
    <div id="popup-content">                                                            
        <button type="button" class="close"><strong>&times;</strong></button>           
    </div>                                                                              
</div>

还有一些用于弹出窗口的脚本：

$(document).ready(function(){                                                           
    $(".teaser-btn").click(function(){                                                  
        $("#popup").fadeToggle(500);                                                    
    });                                                                                 
    $(".close").click(function(){                                                       
        $("#popup").hide();                                                             
        $("#popup>div:first-child").remove();                                           
    });                                                                                 
});                                                                                     
</script>

但是显然这是行不通的，因为我将</script>作为script标签内的字符串，该标签关闭了标签。 UX应该是这样的：页面上有很多按钮。每个对应一个不同的视频。当用户单击这些按钮之一时。当用户点击x按钮时，弹出窗口关闭。并且用户可以单击相同的按钮再次以相同的方式观看相同的视频，或者单击新的按钮来播放新的视频。我想知道我该怎么做。请注意，我不想对单个视频进行任何硬编码，而我想以自动方式从数据库或其他内容中加载这些内容。将新产品添加到数据库时，我不想更改任何代码。

将外部视频嵌入弹出窗口

0 个答案: