Блог

Я пытаюсь добавить Pinterest «embed pin» на свой веб-сайт, но не хочу, чтобы отображалась какая-либо информация о заголовке или профиле. Я хочу, чтобы кнопка наведения указателя мыши была только на одном изображении, а не на других изображениях на той же странице.

Я пытался использовать и изменять код, как указано в Pinterest:

 <script type="text/javascript" async defer src="//assets.pinterest.com/js/pinit.js"></script>
<a data-pin-do="embedPin" href="https://www.pinterest.com/pin/99360735500167749/"></a>
 

и

 <iframe src="https://assets.pinterest.com/ext/embed.html?id=99360735500167749" height="454" width="236" frameborder="0" scrolling="no" ></iframe>
 

Я возился с этим уже несколько часов и вообще не добился в этом никакого прогресса. Любая помощь будет с благодарностью принята!

Пример

Iframes может быть сложным элементом для работы. Iframe — это, по сути, собственная встроенная веб-страница, то есть внутри iframe у вас есть новый html, новый тег тела и т. Д. Вот почему любой css, который вы применяете на своей странице, не повлияет на ваш iframe.

Единственный способ стилизовать ваш iframe — это использовать javascript для вставки таблицы стилей внутри самого iframe. Затем вы можете использовать css для таргетинга на элементы, которые хотите скрыть, так же, как вы обычно делаете (например display:none ) Поскольку ваш javascript должен «вставить» это, вам нужно будет поместить любой css внутри этой функции.

В прошлый раз, когда у меня была подобная проблема, я использовал эту ссылку, в ней пошагово показано, как это сделать: https://redstapler.co/how-to-apply-css-to-iframe /

Это предполагает, что у вас есть навыки css для изменения и стилизации этих элементов. Если вы еще этого не сделали, я предлагаю вам сначала ознакомиться с css и попрактиковаться в этом.

Удачи!