Question

我一直在我的投资组合网站（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>

有人可以帮助我消除播放器下方的空白吗？我已经尝试解决这个问题好几天了，这让我发疯了：'）。如果你们需要更多的代码来理解问题，请问。

宏伟的弹出窗口-SoundCloud iframe调整大小

0 个答案: