Question

您好我试图调整网页中YouTube视频的大小。我希望他们能够快速响应我使用jquery来做到这一点。我已经成功完成了，但问题是我希望youtube视频的高度降低。现在，它太大了。当我尝试这样做时，响应性功能被删除。你能看看我如何减小视频的大小并保持响应能力吗？

<script>
function update_iframe_size(){
  var parent_id = $("iframe").parent().attr("id");
  if (parent_id == "main_video") {
    var parent_class = $("iframe").parent().attr("class");
    var parent_width = $("iframe").parent().width();
    console.log(parent_class);
    var width = $("iframe").css("width"); // $("iframe").width();
    var height = $("iframe").css("height");
    var ratio = parseInt(height)/parseInt(width);
    var new_height = parseInt(parent_width) * ratio
    $("iframe").css("width", parent_width);
    $("iframe").css("height", new_height);
  }
}
update_iframe_size()
$(window).bind("resize", function(){
  // alert("reized");
  update_iframe_size();
});
</script>

我试图降低我做$("iframe").css("height", new_height*0.7);的高度但是然后将高度设置为我想要的高度。然而，响应性变得混乱。

Answer 1

Refer following link: iFrame always take height and width 100% depends on parent div/element which is position relative.

http://jsfiddle.net/masau/7wrhm/

使用jquery调整iframe的响应大小

1 个答案: