Question

<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>

我上面的代码段和div内部的channel_div来自youtube的样式，宽度限制会破坏用户界面。

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

我尝试了this提出的问题如下：

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

也尝试了这个：

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

但这些都没有奏效。我只想将宽度添加为300px。

有人可以就此提供指导。

Answer 1

您无法使用来自远程域的iframe执行此操作。

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

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

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

我在手机上，所以我现在真的无法测试它。

Answer 2

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

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

Answer 3

嵌入式YouTube视频将在iframe中显示如下：

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

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

从嵌入的YouTube视频中删除css样式

3 个答案: