Question

我有一些iframe（YouTube视频），我想在iframe上添加一个链接。我想要做的是将每个链接完全放在iframe上，但这只发生在第一行（前3个iframe），而其他链接（第4个链接及以上）则放在第三个链接旁边。

这是代码

$(".fancybox")
  .attr('rel', 'gallery')
  .fancybox({
    openEffect: 'none',
    closeEffect: 'none',
    nextEffect: 'none',
    prevEffect: 'none',
    padding: 0,
    margin: [20, 60, 20, 60] // Increase left/right margin
  });

$('iframe').each(function() {
  var source = $(this).attr('src');
  $(this).attr('src', source + "&showinfo=0&rel=0&controls=2");
});

$('iframe').addClass('col-xs-12 col-md-4');

$('iframe').attr('href', '#');

var width = $('iframe').width();


$('iframe').css({
  'height': 0.6 * width + 'px'
});

var height = $('iframe').height();

$('p').each(function() {
  $(this).prepend('<a href="' + $(this).find('iframe').attr('src') + '" class="wrapper col-xs-12 col-md-4 fancybox fancybox.iframe"><a/>');
})

//$('.wrapper').width(width);
$('.wrapper').height(height);

.entry-content p {
  margin: 0 0 0 0 !important;
}
.entry-content p iframe {
  margin-bottom: 30px;
  display: inline-block;
}
.wrapper {
  border: none;
  position: absolute;
  vertical-align: baseline;
  float: left !important;
  z-index: 9999 !important;
}
.fancybox-type-iframe .fancybox-nav {
  width: 60px;
}
.fancybox-type-iframe .fancybox-nav span {
  visibility: visible;
  opacity: 0.1;
}
.fancybox-type-iframe .fancybox-nav:hover span {
  opacity: 1;
}

<link href="http://fancyapps.com/fancybox/source/jquery.fancybox.css" rel="stylesheet" />
<script src="http://fancyapps.com/fancybox/source/jquery.fancybox.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="content-left-wrap col-md-12">
    <div class="entry-content">
      <p>
        <iframe width="640" height="360" src="https://www.youtube.com/embed/Bctaf7alxpE?feature=oembed&amp;showinfo=0&amp;rel=0&amp;controls=2" frameborder="0" allowfullscreen="" class="col-xs-12 col-md-4" href="#" style="height: 204px;"></iframe>
      </p>
      <p>
        <iframe width="640" height="360" src="https://www.youtube.com/embed/Bctaf7alxpE?feature=oembed&amp;showinfo=0&amp;rel=0&amp;controls=2" frameborder="0" allowfullscreen="" class="col-xs-12 col-md-4" href="#" style="height: 204px;"></iframe>
      </p>
      <p>
        <iframe width="640" height="360" src="https://www.youtube.com/embed/Bctaf7alxpE?feature=oembed&amp;showinfo=0&amp;rel=0&amp;controls=2" frameborder="0" allowfullscreen="" class="col-xs-12 col-md-4" href="#" style="height: 204px;"></iframe>
      </p>
      <p>
        <iframe width="640" height="360" src="https://www.youtube.com/embed/Bctaf7alxpE?feature=oembed&amp;showinfo=0&amp;rel=0&amp;controls=2" frameborder="0" allowfullscreen="" class="col-xs-12 col-md-4" href="#" style="height: 204px;"></iframe>
      </p>
      <p>
        <iframe width="640" height="360" src="https://www.youtube.com/embed/Bctaf7alxpE?feature=oembed&amp;showinfo=0&amp;rel=0&amp;controls=2" frameborder="0" allowfullscreen="" class="col-xs-12 col-md-4" href="#" style="height: 204px;"></iframe>
      </p>
      <p>
        <iframe width="640" height="360" src="https://www.youtube.com/embed/Bctaf7alxpE?feature=oembed&amp;showinfo=0&amp;rel=0&amp;controls=2" frameborder="0" allowfullscreen="" class="col-xs-12 col-md-4" href="#" style="height: 204px;"></iframe>
      </p>
      <p>
        <iframe width="640" height="360" src="https://www.youtube.com/embed/Bctaf7alxpE?feature=oembed&amp;showinfo=0&amp;rel=0&amp;controls=2" frameborder="0" allowfullscreen="" class="col-xs-12 col-md-4" href="#" style="height: 204px;"></iframe>
      </p>
    </div>
  </div>
</div>

您还可以在https://jsfiddle.net/vg734x3u/1/找到一个代码段并查看结果here。

谢谢！

Answer 1

当你为每个p元素添加一个锚点时，我发现了一个拼写错误。 <a/>应为</a>。我还发现缺少分号。如果您在小提琴上运行JSHint，您将看到问题。

无论如何，请查看此fiddle。它通过修改样式表在每个iframe上放置一个链接。您可以从这里开始，让您的页面布局更漂亮。

Bootstrap - 三个相等的列不会改变线路＆＃39; a＆＃39;元件

1 个答案: