我想能够在我的博客文章中使用第一个iframe,并将其移到帖子体外,并进入我创建的名为#myvideos的div。我见过像this one这样的博客模板完成了这项工作,将视频移出了帖子。这就是我想用自己的模板做的事情:https://taylorduane.blogspot.com/2017/12/blog-post_58.html
这是JQuery:
<script>
// <![CDATA[
$(function() {
if($("#bigframe").length>0) {
var bigvideo = $("#bigframe").attr("src");
var videotag = '<iframe src="'+bigvideo+'" id="covervideo" frameborder="0"></iframe>';
$(videotag).appendTo("#myvideo");
$("#bigframe").remove();
}
else {
$("#myvideo,#post-right").remove();
}
});
// ]]>
</script>
首先隐藏帖子正文中的第一个iframe以防止它轻弹然后移动它。
<style type="text/css">
.post-body #bigframe { display:none; }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myvideo"></div>
<div class="post-body">
<iframe id="bigframe" frameborder="0" height="281" src="https://player.vimeo.com/video/14592941" width="500"></iframe>
</div>
<script type="text/javascript">
$('#bigframe').appendTo('#myvideo');
</script>