Wordpress - 홈 페이지의 비디오 (iframe) 크기 변경

웹 사이트에서 작업 중이며 비디오 출력에 문제가 있습니다.Wordpress - 홈 페이지의 비디오 (iframe) 크기 변경

// 사이트는 다음과 같습니다 포스트에서

http://tastethemovement.org, 나는 560px의 폭 유튜브 비디오를 내장. 게시물에서 멋지게 보입니다. 그러나 이미지가 홈페이지에 표시 될 때 허용되는 크기를 초과합니다. 나는 단지 그것이 316 픽셀의 최대가되고 싶다.

내 CSS의 클래스 인 iframe에 width 속성을 추가하려고했지만 작동하지 않습니다. iframe 클래스를 설정하고 너비가 316px 만 허용하면 게시물의 동영상도 줄어 듭니다.

도움이 될 것입니다.

출처

2013-03-24 user2132752

콘텐츠의 최대 크기로 iframe을 확장하는 jsFiddle에서이 jQuery 코드를 사용했습니다. 다음 jQuery 코드를 추가 템플릿에서

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

: 포스트에서

당신은이 HTML 코드를 추가합니다.

<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

저는 javascript에 대한 전문가는 아니지만 Chrome 개발자 도구를 살펴보면 Javascript 오류가 상당히 많이 발생합니다. 처음부터 제거하십시오. 이것을 확인하십시오 : http://stackoverflow.com/questions/7181573/does-javascript-execution-stop-when-an-invalid-line-is-encountered – user850010

홈페이지의 이미지가 "추천 이미지 설정"방법에서 나왔다면 비디오의 화면 잡기를 할 수 있으며, 크기를 조정하여이를 "추천 이미지"로 사용할 수 있습니다.

출처

2013-03-24 14:05:32

Wordpress - 홈 페이지의 비디오 (iframe) 크기 변경

답변

관련 문제