WordPress的 - 在主頁上更改視頻（iframe）的尺寸

在網站上工作，並與視頻輸出有問題。WordPress的 - 在主頁上更改視頻（iframe）的尺寸

//該網站是：http://tastethemovement.org

在帖子中，我嵌入YouTube視頻與560像素的寬度。這篇文章看起來很棒。但是當該圖像被拉到主頁上顯示時，它會超出允許的尺寸。我只希望它是最大的316像素。

我試着在我的CSS中添加一個寬度屬性，一個類給我的iframe，但無法讓它工作。如果我設置了一個iframe類並且只允許寬度爲316px，那麼帖子中的視頻也會減少。

任何幫助將是偉大的！

來源

2013-03-24 user2132752

我在jsFiddle中有這個jQuery代碼，它將iframe擴展爲內容的最大尺寸。

在後您添加HTML代碼：

<article> 
<p><iframe width="400" height="400" src="http://www.youtube.com/...."></iframe></p> 
</article>

在模板中添加下面的jQuery代碼。

<script type='text/javascript'> 
jQuery(document).ready(function($) { 
$(function() { 

var $allVideos = $("iframe[src^='http://player.vimeo.com'], iframe[src^='http://www.youtube.com'], object, embed"), 
$fluidEl = $("p"); 

$allVideos.each(function() { 

    $(this) 
    // jQuery .data does not work on object/embed elements 
    .attr('data-aspectRatio', this.height/this.width) 
    .removeAttr('height') 
    .removeAttr('width'); 
}); 

$(window).resize(function() { 

    var newWidth = $fluidEl.width(); 
    $allVideos.each(function() { 

    var $el = $(this); 
    $el 
     .width(newWidth) 
     .height(newWidth * $el.attr('data-aspectRatio')); 

    }); 

}).resize(); 

}); 
}); 
</script>

我試了我的Wordpress網站上的代碼，它的工作。

來源

2013-03-24 14:11:30 user850010

在Chrome中很有效。有關Safari和Firefox瀏覽器兼容性的任何建議？ – user2132752 2013-03-26 00:09:48

我不是javascript專家，但看着Chrome開發人員工具，你有很多Javascript錯誤。先嚐試擺脫那些。檢查這個http://stackoverflow.com/questions/7181573/does-javascript-execution-stop-when-an-invalid-line-is-encountered – user850010 2013-03-26 07:27:51

如果主頁上的圖像來自「設置精選圖像」方法，您可以對視頻進行屏幕截圖，調整大小並將其用作「精選圖像」。

來源

2013-03-24 14:05:32

WordPress的 - 在主頁上更改視頻（iframe）的尺寸

回答

相關問題