如何在模态下打开 Youtube 视频答案

【问题标题】：How to open Youtube video on modal如何在模态下打开 Youtube 视频
【发布时间】：2020-10-24 16:59:01
【问题描述】：

我需要调整我的代码，以便在用户点击视频时以打开的模式播放视频。

此代码是在用于显示图像的模式中实现的。

我用JS：https://dimsemenov.com/plugins/magnific-popup/documentation.html

PHP：

<?php 

$url = 'https://www.youtube.com/feeds/videos.xml?channel_id=ID';
$xml = simplexml_load_file($url);
$ns = $xml->getDocNamespaces(true);
$xml->registerXPathNamespace('a', 'http://www.w3.org/2005/Atom');
$elementos = $xml->xpath('//a:entry');
$conteudo = $elementos[0];

$videos_pagina = "12";
$page = isset($_GET['pagina'])?intval($_GET['pagina']-1):0;
$total_paginas = ceil(count($elementos)/$videos_pagina);

    if (isset($_GET['pagina']) && is_numeric($_GET['pagina'])) {
        $pagina = (int) $_GET['pagina'];
    } else {
        $pagina = 1;
    }
    if ($pagina > $total_paginas) {
        $pagina = $total_paginas;
    }
    if ($pagina < 1) {
        $pagina = 1;
    }

$offset = ($pagina - 1) * $videos_pagina;
$range = 3;
$prevpage = $pagina - 1;
$nextpage = $pagina + 1;
$anterior = $baseurl."/videos/pagina/".$prevpage;
$proxima = $baseurl."/videos/pagina/".$nextpage;
?>

HTML：

<section class="about-section pb30">
        <div class="container">
            <div class="row">
                <?php
                foreach (array_slice($elementos, $page*$videos_pagina, $videos_pagina) as $item) {
                    $media = $item->children('http://search.yahoo.com/mrss/');
                    $yt = $item->children('http://www.youtube.com/xml/schemas/2015');
                    $miniatura = $media->group->thumbnail->attributes()->url->__toString();
                    $titulo = $item->title;
                    $url_embed = "https://www.youtube.com/embed/".$yt->videoId;
                ?>
                <div class="col-sm-6 col-md-6 col-lg-4">
                    <div class="gallery_item">
                        <img class="img-fluid img-circle-rounded w100" src="<?php echo $miniatura; ?>" alt="<?php echo $titulo; ?>">
                        <div class="gallery_overlay"><a href="#" class="icon popup-img" ><span class="fa fa-play"></span></a></div>
                    </div>
                </div>
                <?php } ?>
                <div class="col-sm-12 col-md-12 col-lg-12">
                    <div class="gallery_item" align="center"><br>
                    <button type="button" <?php if ($pagina > 1) { }else{ echo "disabled"; } ?> onclick="location.href='<?php echo $anterior; ?>';" class="btn btn-lg btn-thm">Página anterior</button>
                    <button type="button" <?php if ($pagina != $total_paginas) { }else{ echo "disabled"; } ?> onclick="location.href='<?php echo $proxima; ?>';" class="btn btn-lg btn-thm">Próxima página</button>
                    </div>
                </div>
            </div>
        </div>
    </section>

目前，当用户点击视频时，他会打开模式，但是我需要加载视频。

我该怎么办？

【问题讨论】：

标签： javascript php jquery youtube-api magnific-popup

【解决方案1】：

您可以像在普通网页上一样轻松地将 YouTube 视频嵌入或放置在 Bootstrap 模式中。只需从 YouTube 网站获取嵌入视频的代码并将其放在 .modal-body 元素中。但是有一个小问题；当您关闭模态窗口时，YouTube 视频不会自动停止。它仍会在后台播放。

要解决这个问题，您可以简单地使用 jQuery 动态切换 YouTube 的视频 iframe src 属性的 url 值。让我们试试下面的例子：

<!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>

【讨论】：

您好，感谢您的回复！你能帮我在我当前的代码中实现这个吗？老实说，我不知道如何使用这些 jquery 代码进行自定义。
问题是有几个视频，用php重复参数显示。我认为在那种情况下使用该代码会有问题，对吧？也许您希望在链接中包含视频 ID 以打开弹出窗口。