更改嵌入式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

回答

相关问题