更改嵌入式YouTube視頻的CSS

這是我的網站：http://oldtimesdaily.tumblr.com/更改嵌入式YouTube視頻的CSS

我現在正在使用tumblr發佈圖片和視頻。不幸的是，使用「照片」和「視頻」選項將不允許我放置任何標題，因此我使用「文本」選項，而不是簡單地嵌入圖片和視頻。

現在的問題是，嵌入的YouTube視頻不與圖片排列在一起。我已將50px左邊距的圖片完美排列，但我如何對YouTube視頻執行相同操作？這裏的CSS代碼：

.POST {

 /* background: url('http://s23.postimg.org/5fvqrgozv/Post2.png') repeat-y center top; */ 
      background-color: white;  

      width:1000px; /* editable */ 
      margin: 0px 0px 0px; /* test*/ 
      line-height: 1.4; 
      } 

      .Post img { 

       margin: 0px 50px 50px 70px; /* editable */   
       max-width: 100%; 
       -webkit-box-shadow: #444 0px 0px 6px; 
       -moz-box-shadow: #444 0px 0px 6px; 
       {block:PermalinkPage} 
        width: 625px; 
       {/block:PermalinkPage} /*editable

而且{塊：郵政} {塊：帖子}

  {block:Text} 
       {block:IndexPage} 

      <div id="postlinks"> 
      <div class="fb-like" data-href="{ShortURL}" data-send="false" data-layout="box_count" data-width="100" data-show-faces="true" data-font="arial"> 

       </div> 
       </div> 
       {/block:IndexPage} 

       <div class="Text"> 
       {block:Title} 
       <a href="{Permalink}" target="_blank" class="Title">{Title}</a> 

       {/block:Title} 

       <div class="PostBody">{Body}</div> 
      </div> 


      {/block:Text}

來源

2013-06-29 user2502669

您可以將IFRAME標籤添加到CSS規則爲img像這樣：

.Post img, iframe { 

      margin: 0px 50px 50px 70px; /* editable */   
      max-width: 100%; 
      -webkit-box-shadow: #444 0px 0px 6px; 
      -moz-box-shadow: #444 0px 0px 6px; 
      {block:PermalinkPage} 
       width: 625px; 
      {/block:PermalinkPage} /*editable

示例顯示此處： http://i.imgur.com/YTPg9p8.png

來源

2013-06-29 17:35:29 devbnz

工作，謝謝！但是它也影響了我的其他iframe。有沒有辦法只指定YouTube上的iframe？因爲我有其他來自Facebook的iframe和jotform的提交表單以及受影響的。 – user2502669

它看起來像是所有的youtube iframe都有： id =「player1」或name =「player1」 – devbnz

更改嵌入式YouTube視頻的CSS

回答

相關問題