gpt4 book ai didi

embed - 使 Spotify 嵌入响应

转载 作者:行者123 更新时间:2023-12-05 01:18:25 29 4
gpt4 key购买 nike

目前正在进行响应式设计,需要嵌入响应式 Spotify。我尝试只使用 css(不起作用),然后使用 fitvids.js(作为一个奇怪的 janky 解决方案),这种方法有效,但仅在初始页面加载时有效,有时会在底部放置很大的边距。

请参阅此处的示例或查看底部的代码:
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>

最佳答案

我最终编写了一个小的 jQuery 片段来调整播放器的大小并在窗口加载和调整大小时重新加载 iframe。一个非常hacky的解决方案,但它有效。只需在您嵌入 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

关于embed - 使 Spotify 嵌入响应,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13039311/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com