Скрыть элемент внутри Iframe

Question

Я пытаюсь скрыть заголовок внутри iframe, но по какой-то причине он не работает. Может кто-нибудь взглянуть на мой код и помочь мне понять, почему заголовок все еще виден? Спасибо.

<iframe id="booking_iframe" src="https://bananahostels.com/booking-engine/cacao-hostel" width="100%" height="1500px" frameborder="0" style="border:0;" allowfullscreen=""></iframe>

$('#booking_iframe').load(function() {
  $('#booking_iframe').contents().find('.hostel-branding').hide();
}

Answer 1

Измерьте высоту заголовка с помощью инструментов, предоставленных в FF Developer Edition, Chrome, вероятно, имеет аналогичную функцию.

А именно щелчок правой кнопкой мыши> осмотреть элемент> значок маленькой линейки в правом верхнем углу. затем оберните ваш Iframe внутри другого div, для которого overflow:hidden; указано в вашем css. Тогда все, что вам нужно сделать, это установить в Iframe значение Css transform:translateX(-theHeightOftheHeader.);

Возможно, немного хакерский, но так как это внешний URL, который может показаться вам лучшим вариантом.