Magnific Popup - изменение размера фрейма SoundCloud - PullRequest
Новая
       21

Magnific Popup - изменение размера фрейма SoundCloud

0 голосов
/ 05 февраля 2019

Я работал над своим веб-сайтом портфолио (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 ( встроенная ссылка soundcloud )

Когда я копирую код SRC из встроенной ссылки и вставляю его в hrefраздел, кажется, работает, но размер фрейма тот же, что и у видео.Это приводит к появлению большого пустого пространства под плеером 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>

Кто-нибудь может мне помочь с удалением пустого пространства под плеером?Я уже несколько дней пытаюсь решить эту проблему ... это сводит меня с ума: ').Если вам, ребята, нужно больше кода, чтобы понять проблему, просто спросите.

...