如何在模态下打开 Youtube 视频
Posted
技术标签:
【中文标题】如何在模态下打开 Youtube 视频【英文标题】：How to open Youtube video on modal 【发布时间】：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; ?>" >
<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>
目前，当用户点击视频时，他会打开模式，但是我需要加载视频。
我该怎么办？
【问题讨论】：
【参考方案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">×</button>
<h4 class="modal-title">YouTube Video</h4>
</div>
<div class="modal-body">
<iframe id="cartoonVideo" src="//www.youtube.com/embed/YE7VzlLtp-4" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</div>
</body>
</html>【讨论】：
您好，感谢您的回复！你能帮我在我当前的代码中实现这个吗？老实说，我不知道如何使用这些 jquery 代码进行自定义。 问题是有几个视频，用php重复参数显示。我认为在那种情况下使用该代码会有问题，对吧？也许您希望在链接中包含视频 ID 以打开弹出窗口。以上是关于如何在模态下打开 Youtube 视频的主要内容，如果未能解决你的问题，请参考以下文章
使用Light YouTube嵌入模态（从基础显示） - 如何在模态窗口关闭后停止视频播放？
以模态自动播放Youtube视频？ （Avada Wordpress主题）
iOS5：在模态 UIViewController 中播放 Youtube 视频时 UIWebView 出现异常