前端之家

  1. 首页
  2. 问答

如何在模态下打开Youtube视频

• 问答

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

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

我使用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>

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

我应该怎么办？

iCMS 回答：如何在模态下打开Youtube视频

您可以像在普通网页上一样轻松地将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',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>

javascriptjquerymagnific-popupphpyoutube-api
本文链接：https://www.f2er.com/2002998.html

大家都在问