4

現在、レスポンシブ デザインに取り組んでおり、レスポンシブ Spotify 埋め込みが必要です。私はcssだけで試して（うまくいきませんでした）、次にfitvids.jsを（奇妙なジャンクソリューションとして）使用しましたが、これは最初のページの読み込みでのみ機能し、時には下部に大きなマージンを置きます。

例についてはこちらを参照するか、下部のコードを参照してください: http://codepen.io/oosabaj/full/keEBu

Dave Rupert (fitvids のメーカー) は、「Spotify は独自のリサイズ "魔法" を行っているように見えるので、おそらくうまくいかないだろう」と述べています。

開発者（おそらくSpotifyのもの）は解決策を得ましたか？

<html>
<head>
<style>
    body{
      background: #e0d7d4;
    }

    #wrap {
      width: 900px;
      min-height: 200px;
      margin: 15px;
      background: #fff;
      border-radius: 2px;
      box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.15);
    }

    @media only screen and (max-width: 980px) {
      #wrap {
        width: 700px;
      }
    }

    @media only screen and (max-width: 780px) {
      #wrap {
        width: 500px;
      }
    }

    @media only screen and (max-width: 580px) {
      #wrap {
        width: 300px;
      }
    }
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://fitvidsjs.com/js/jquery.fitvids.js"></script>
<script>
      $(document).ready(function(){
$("#wrap").fitVids({ customSelector: "iframe[src^='https://embed.spotify.com']"});
      });
</script>
</head>

<body>
    <div id="wrap">
    <iframe src="https://embed.spotify.com/?uri=spotify:user:erebore:playlist:788MOXyTfcUb1tdw4oC7KJ&amp;theme=white" width="300" height="380" frameborder="0" allowtransparency="true"></iframe>
    </div>
</body>
</html>
4

3 に答える 3

4

最後に、プレーヤーのサイズを変更し、ウィンドウの読み込みとサイズ変更時に iframe をリロードするための小さな jQuery スニペットを作成しました。非常にハックなソリューションですが、機能します。Spotify が埋め込まれているページにコードを含めるだけです。誰かがより良い解決策を持っているなら、私はそれを聞いてうれしいです.

$(document).ready(function(){
  $('iframe[src*="embed.spotify.com"]').each( function() {
    $(this).css('width',$(this).parent(1).css('width'));
    $(this).attr('src',$(this).attr('src'));
  });
});
$(window).resize(function() {
  $('iframe[src*="embed.spotify.com"]').each( function() {
    $(this).css('width',$(this).parent(1).css('width'));
    $(this).attr('src',$(this).attr('src'));
  });
});

デモはこちら: http://codepen.io/jbasoo/pen/gDkoc

于 2013-05-09T13:16:19.073 に答える
1

これをデザインにどのように組み込むのが最善かはわかりませんが、Spotify ウィジェットはそのプロポーションについてかなりうるさい場合があります。ドキュメンテーションページで幅と高さの最小値と最大値を示していますが、さらに重要なことに、この小さな宝石が含まれています。

指定された高さが指定された幅より 80 ピクセル大きい場合、大きいプレーヤーがレンダリングされます。それ以外の場合は、コンパクト プレーヤーがレンダリングされます。

表示されるプレーヤーのバージョンにのみ影響するように思えます。実際には、全面的にその制限に従わないと、ファンキーな表示の不具合が発生することがわかりました。プレーヤーの一部が隠されたり、iframe に空白の大きな塊ができたりするなどです。

動的にサイズ変更されるシャドウ ボックスでさまざまなプレイリストを表示するウィジェットをかなりうまく表示できますが、そのシャドウ ボックスは JavaScript で起動されるため、幅と高さを完全に制御できます。常に幅を高さ - 80 に設定できます。

また、ウィンドウのサイズ変更もうまく処理しません。iframe は完全にサイズ変更されますが、その内容は再描画されません。実際のウィジェット ページは、最初の読み込み時に iframe 内の利用可能なスペースに基づいてサイズを計算しているように見え、ページのサイズ変更イベントを監視しません。ウィジェットの URLを直接読み込むことで、iframe がなくてもそうであることがわかります。それがあなたにとって大きな懸念事項である場合、外側のページで javascript を使用してサイズ変更を監視し、そのイベントを使用して iframe の更新をトリガーすることができますか?

于 2012-10-25T02:57:14.473 に答える