Мне нужно встроить собственный код для встраивания с внешнего веб-сайта в мой пост в WordPress.
код для встраивания имеет следующий формат:
<!-- TradingView Chart BEGIN -->
<script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
<script type="text/javascript">
var tradingview_embed_options = {};
tradingview_embed_options.width = '640';
tradingview_embed_options.height = '400';
tradingview_embed_options.chart = 'z1zThvGU';
new TradingView.chart(tradingview_embed_options);
</script>
<p><a href="https://www.tradingview.com/chart/GBPUSD/z1zThvGU-GBPUSD-Forecast-on-H4/">GBPUSD, Forecast on H4.</a> by <a href="https://www.tradingview.com/u/DatTong/">DatTong</a> on <a href="https://www.tradingview.com/">TradingView.com</a></p>
<!-- TradingView Chart END -->
код работает нормально, но он не полностью адаптивен при просмотре на мобильном устройстве или в таблице и не центрируется на рабочем столе. возможно, потому что код сгенерировал фиксированную ширину и фиксированную высоту.
Но это проблема. Мне нужно переопределить стили встраиваемого кода, чтобы я мог стилизовать его так, как я хочу.
Я перепробовал много вариантов, но он не работает. Я также проверил DOM и обнаружил, что есть сгенерированный div-обертка, который был сгенерирован, но при попытке стилизовать этот сгенерированный div-обертку он все еще не работает. другой вариант, который я сделал, заключался в том, чтобы вручную обернуть код в редакторе WordPress, надеясь, что я смогу контролировать ширину и высоту, но все равно он не работает. Несмотря на то, что это сработало, не рекомендуется вставлять его вручную в каждое сообщение блога, поэтому было бы неплохо, если бы мы могли переопределить его с помощью пользовательской таблицы стилей.
См. Скрипту ниже:
http://jsfiddle.net/7695akjh/8/
Есть идеи, как сделать этот код полностью адаптивным?