Audiomack embeds не работает на мобильных устройствах

Question

У меня есть два блога WordPress, в которых я использую разные темы Wordpress. Я столкнулся с проблемой на 2-м сайте, проблема в том, что встраивание Audiomack не подходит для экрана мобильных устройств.

Встраивание 1-го сайта отлично работает на мобильных устройствах. Ссылка на встраиваемые файлы mr-eazi-one-day-you-will-convert-ep .

На 2-м сайте все встраиваемые элементы адаптируются на мобильных устройствах, кроме встраиваемых файлов Audiomack. Ссылка на встраивание голос-кенчи-разговорчив .

Скриншот: Изображение Audiomack встраивается скрывает значок плей и волн

Мои CCS и HTML для отзывчивого iframe:

/*---------- 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%;
}}

<div class="iframe-container"><iframe></iframe></div>

Answer 1

Я решил эту проблему, изменив padding-top: 56.25% на padding-top: 70% на iframe-container .

Я проверил встраивание 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%;
}

Скриншот моего результата