2

我一直在我的投资组合网站 (www.gerwinweidenaar.com) 上工作。我在我的作品集中使用视频（youtube、vimeo）、图像和 soundcloud 链接。我用于网格的插件是“Magnific Popup”。默认情况下，插件支持图像。通过对 HTML 进行一些更改，并向 JS 添加代码，我设法添加了视频：

$('.video').magnificPopup({
  type: 'iframe',
  iframe: {
     markup: '<div class="mfp-iframe-scaler">'+
                '<div class="mfp-close"></div>'+
                '<iframe class="mfp-iframe" frameborder="0" allowfullscreen></iframe>'+
                '<div class="mfp-title">Some caption</div>'+
              '</div>'
  },
  callbacks: {
    markupParse: function(template, values, item) {
     values.title = item.el.attr('title');
    }
  }
  
});
<div class="mix film" href="https://vimeo.com/220228738" 
title="The Heavens
          <div class="portfolio-wrapper">
            <a class="video" href="https://vimeo.com/220228738"><img src="img/agency/portfolio/grid/grid-1.jpg"></a>
            <div class="caption">
              <div class="caption-text">  
                <a class="text-title">The Heavens</a>
                <span class="text-category">Compositie</span>
              </div>
              <div class="caption-bg"></div>
            </div>
          </div>
        </div>

现在我正在尝试将 SoundCloud 链接添加到投资组合部分。问题是我的代码不支持 soundcloud 提供的嵌入链接（embeded soundcloud link）

当我从嵌入链接中复制 SRC 代码并将其放入 href 部分时，它似乎可以工作，但 iframe 的大小与视频相同。这会导致 SoundCloud 播放器下方出现很大的空白。

     <div class="mix film" href="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/555366285%3Fsecret_token%3Ds-PfrSv&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true"  title=" The Opening
     <br> Composition: Gerwin Weidenaar"></i>  </small>
       <div class="portfolio-wrapper">
         <a class="video"  href="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/555366285%3Fsecret_token%3Ds-PfrSv&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true"><img src="img/agency/portfolio/grid/grid-1.jpg"></a>
         <div class="caption">
           <div class="caption-text">  
             <a class="text-title">The Heavens</a>
             <span class="text-category">Compositie</span>
           </div>
           <div class="caption-bg"></div>
         </div>
       </div>
     </div>

谁能帮我删除播放器下方的空白？我已经尝试解决这个问题好几天了..它让我发疯:')。如果你们需要更多代码来理解问题，请询问。

4

0 回答 0