删除来自嵌入式 YouTube 视频的 CSS 样式答案

【问题标题】：Remove css styles coming from embeded YouTube videos删除来自嵌入式 YouTube 视频的 CSS 样式
【发布时间】：2012-12-06 08:37:57
【问题描述】：

<div id="videos">
   <div id="channel_div" style="display: block;">
      <div style="color: rgb(0, 0, 0); font-family: Arial, Helvetica, sans-serif; font-size: 12px; width: 555px;" class="firstVideo">
      .. trimmed <table here> 

      </div>
      <div style="color: rgb(0, 0, 0); font-family: Arial, Helvetica, sans-serif; font-size: 12px; width: 555px;">
       .. trimmed <table here>
      </div>
   </div>
</div>

我上面的 sn-p 和 divs 里面的 channel_div 来自 youtube，带有样式，宽度限制会破坏 UI。

如何使用 jquery 删除这些样式？

我尝试了this问题的建议如下：

$('#channel_div div').removeAttr('style');

也试过这个：

$('#channel_div > div').removeAttr('style');

但这些都不起作用。我只想将我的宽度添加为 300 像素。

有人可以提供这方面的指导吗。

【问题讨论】：

它们应该在 iframe 中，您不能使用 JavaScript 来操作它们。
是的，@undefined 是对的。我在想一些问题，比如你不能删除“style”属性，但实际上你可以。所以我猜你无法操作的原因是 html 在 iframe 中。
@redShadow 实际上你可以操纵 iframe 的内容，但在这种情况下 Same Origin Policy 会阻止它。

标签： jquery html css youtube

【解决方案1】：

我认为你可以在 iframe 中操作 html，试试这个：

$('#iframeID').contents().find('#someID').html();

【讨论】：

是的，你可以，但这里 iframe 的来源不同，你不能。 en.wikipedia.org/wiki/Same_origin_policy

【解决方案2】：

您不能对来自远程域的 iframe 执行此操作。

但是，您可以使用 php 并在内部获取远程文件以删除服务器端的这些参数，或者甚至使用 jquery 通过加载该获取的文件并使其成为内部嵌入。

另外，如果只是宽度问题，您是否尝试过添加 CSS 规则？

.firstVideo { max-width: 300px !important; }

我在我的手机上，所以我现在真的无法确定它。

【讨论】：

【解决方案3】：

嵌入的 youtube 视频将在 iframe 中，如下所示：

   <iframe width="570" height="321" 
           src="http://www.youtube.com/embed/L5ZGU1Qkx8?
           wmode=opaque&showinfo=0&autohide=1" frameborder="0"> 
    </iframe>

所以在这里你可以使用它自己的属性来设置高度和宽度。

【讨论】：