Magnific Popup - SoundCloud iframe resize

Question

I've been working on my portfolio website (www.gerwinweidenaar.com). I'm using videos (youtube, vimeo), images and soundcloud links in my portfolio. The plugin i'm using for the grid is 'Magnific Popup'. By default the plug-in supports images. With some changes to the HTML, and adding code to the JS i've managed to add videos:

$('.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>

Now i'm trying to add SoundCloud links to the portfolio section. The problem is that my code doesn't support the embeded link that soundcloud provides (embeded soundcloud link)

When I copy the SRC code out of the embeded link and put in into the href section it seems to work, but the iframe is the same size as the videos. This results in a big white space under the SoundCloud player.

     <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>

Can anyone help me with removing the white space under the player? I've been trying to fix this problems for days already.. its driving my crazy :'). If you guys need more code to understand the problem, just ask.

Magnific Popup - SoundCloud iframe resize

0 Answers0