iframeの幅を変更する

Question

twitterタイムラインのiframeの幅を変更しようとするのは難しいです。私は開発者のツールを見て要素を調べ、複数の要素の幅を変更しましたが、何も動作していないようです。

私が変更しようとしている：https://jsfiddle.net/9pnxL6fb/：ここ

.SandboxRoot, env-wide { 
    width: 30%; 
} 
.timeline-Widget { 
    width: 30%; 
} 
.twitter-timeline, .twitter-timeline-rendered { 

    width: 30%; 
} 

#twitter-widget-0 { 

    width: 30%; 
} 

はフィドルです。検査するためにそれが生きているのを見る必要があるならば、私に知らせてください。

なぜ私は使用している要素に基づいて幅を変更できないのですか？

Answer 1

あなたは#blue divの内側にはiframeをターゲットにする必要がある

#blue iframe {width:30%!important;} 

Answer 2

ディメンションがデフォルトでハードコードされている場合は、Twitterだけでハードコードすることはできますが、CSSだけでディメンションをオーバーライドすることはできません。代わりに、jsで提供されている属性を変更してオーバーライドします。 Twitter widget documentation

Answer 3

大切にしてください！私はそれが助けてくれることを願うあなたが仕事にこれを取得することができる方法の

#blue { 
    width: 30% !important; 
} 

Answer 4

一つ次のようにCSSにいくつかの変更でのjQueryを使用することです：他の回答が正しい半です、あなただけではないかもしれない、CSSを変更し、以下のコードで上書きすることができます別の環境で働く。

$(window).on('load', function() { 
    $('iframe[id^=twitter-widget-]').each(function() { 
     var head = $(this).contents().find('head'); 
     if (head.length) { 
      head.append('<style>.timeline { max-width: 100% !important; width: 100% !important; } .timeline .stream { max-width: none !important; width: 100% !important; }</style>'); 
    } 
     $('#twitter-widget-0').append($('<div class=timeline>')); 
    }) 
}); 

CSS：

iframe[id^='twitter-widget-0'] { 
height:600px !important; 
margin-bottom:10px !important; 
width:100% !important; 
} 

の作業フィドル：

https://jsfiddle.net/48dy23ep/1/

Answer 5

それIウェブマスタリングよりもむしろハッキングです:-)

通常、親ドキュメントからiframeコンテンツを操作する可能性はありません。これはセキュリティ上の理由から保護されています。疑わしいJavaScriptコードなどを挿入しないようにしています。投稿を生成するコードを探していました。このコードは、twitter APIに投稿後のJavaScriptファイルを完全に取得してDOMに格納するよう要求します。 （Twitter Widget Javascript）

Answer 6

<div id="blue"> 
<div class="twitter-iframe"> 
<a class="twitter-timeline" 
</div> 
</div> 

CSSコード

#blue { 
    width: 100%; 
} 

.twitter-iframe { 
    width: 30%; 
}