Audiomack 嵌入在移动设备上没有响应答案

【问题标题】：Audiomack embeds is not responsive on mobile devicesAudiomack 嵌入在移动设备上没有响应
【发布时间】：2020-06-17 10:26:31
【问题描述】：

我有两个 WordPress 博客，但我没有使用相同的 Wordpress 主题。我在第二个站点上遇到问题，问题是 Audiomack 嵌入不适合移动设备的屏幕。

第一个网站嵌入在移动设备上完美运行。链接到嵌入mr-eazi-one-day-you-will-understand-ep。

在第二个站点上，除了 Audiomack 嵌入之外，所有嵌入都可以在移动设备上响应。链接到嵌入voice-kenchi-talkative。

截图：Picture of Audiomack embeds hides play and waves icon

我的响应式 iframe 的 CCS 和 HTML：

/*---------- Responive Iframes ---------*/
	@media (max-width:767px) {
		.iframe-container {
  overflow: hidden;
  padding-top: 56.25%;
  position: relative;
}
 
.iframe-container iframe {
   border: 0;
   height: 100%;
   left: 0;
   position: absolute;
   top: 0;
   width: 100%;
}
 
/* 4x3 Aspect Ratio */
.iframe-container-4x3 {
  padding-top: 75%;
}}

&lt;div class="iframe-container"&gt;&lt;iframe&gt;&lt;/iframe&gt;&lt;/div&gt;

【问题讨论】：

如何填写 iframe 以便我们可以在代码 sn-p 中看到问题。尝试制作Minimal, Reproducible Example。指向您网站的链接可能会发生变化，并且对未来的 StackOverflow 用户毫无用处。
您的代码有几个问题。停止使用空白段落来分隔<p></p>。而是使用边距和填充。摆脱height:100%。在最大宽度 768px 的媒体查询中，删除 iframe 上的 position:absolute 并删除 iframe 容器上的 padding-top: 56.25%。如果您仍然遇到问题，请返回给我们一个可重现的示例。

标签： javascript html css wordpress

【解决方案1】：

我通过在 iframe-container 上将 padding-top: 56.25% 更改为 padding-top: 70% 解决了这个问题。

我检查了 Audiomack、Soundcloud 和 YouTube 嵌入，现在一切正常。

我的可重现 CSS：

/*---------- Responive Iframes ---------*/
	@media (max-width:767px) {
		.iframe-container {
  overflow: hidden;
  padding-top: 70%;
  position: relative;
}
 
.iframe-container iframe {
   border: 0;
   height: 100%;
   left: 0;
   position: absolute;
   top: 0;
   width: 100%;
}

My result screenshot

【讨论】：