Ghost 特色图片和 iframe 问题

Question

HTML

<div class="blog-post">
  <div class="blog-image">
    <a href="#"><img src="img/featured-img.jpg"/></a>
  </div>
  <div class="blog-details">
    <h3>Post Title Here</h3>
    <ul class="blog-meta">
      <li>Date</li>               
      <li>Author</li>
    </ul>
    <div class="blog-excerpt">
      <iframe width="560" height="315" src="https://www.youtube.com/embed/yH4zLmi_6n0" frameborder="0" allowfullscreen></iframe>
    </div>                   
  </div>

并且我使用了以下 js

  function iframe_posts() {
    var video_url = $(".blog-details").find("iframe").attr("src");
    $(".blog-image").html('<iframe width="560" height="315" src="' + video_url + '" frameborder="0" allowfullscreen></iframe>');
  }
}

iframe_posts();

通过此代码图像替换为 iframe 但每个 "blog-post" 显示相同的 iframe。我只想显示每个 "blog-post" 的父视频。假设我有 2 个 blog-post 和 2 个不同的 iframe。现在我想在
中显示 iframe 是

任何人都可以帮助我。

Answer 1

试试这个代码

function iframe_posts() {
  var video_url = $(".blog-details").find("iframe").attr("src");
  $(".blog-excerpt").hide();
  $(".blog-image").html('<iframe width="560" height="315" src="' + video_url + '" frameborder="0" allowfullscreen></iframe>');
}

Answer 2

您必须通过遍历重复元素来处理单个实例

可以通过多种方式做到这一点，但我会从顶层重复容器开始...... class=blog-post

$('.blog-post').each(function(){
   // `this` is current instance of `blog-post`
   var $post = $(this);
   // use `find()` to look inside this `$post` instance
   var video_url = $post.find('iframe').attr('src');
   $post.find('.blog-image').html('....');    
});

Answer 3

$(".blog-post").each(function(){
var wrapper = $(this);
var video_url = wrapper.find("iframe").attr("src");
 var iframe_content = ('<iframe width="560" height="315" src="' + video_url + '" frameborder="0" allowfullscreen></iframe>');
 var video_div =  wrapper.find(".blog-image")
 video_div.each(function(){
          video_div.html(iframe_content);
 });

});

这段代码解决了我的问题。

Ghost 特色图片和 iframe 问题

Ghost featured image and iframe issue

html

javascript

jquery

ghost