如果转载优酷、土豆视频等，怎么让视频自适应宽度？

工作开发中要做前端展示优酷、土豆视频，但遇到视频尺寸不能自适应，研究了一下，有以下两种方法符合自己的需要：

首先看一下优酷、土豆分享视频的html代码：

1、优酷：

<iframe height=498 width=510 src="http://player.youku.com/embed/XMTU1MDgzMjM5Ng==" frameborder=0 allowfullscreen></iframe>

2、土豆：

<iframe src="http://www.tudou.com/programs/view/html5embed.action?type=2&code=xQ5vDA_iuJk&lcode=RGsNNPq-7p0&resourceId=0_06_05_99" allowtransparency="true" allowfullscreen="true" allowfullscreenInteractive="true" scrolling="no" border="0" frameborder="0" style="width:480px;height:400px;"></iframe>

...........

解决方法一，javascript实现：

获取获取浏览器显示区域的高度，然后根据原视频的高、宽比例，计算出新的高、宽，来调整iframe的尺寸

使用jquery代码:

$(function () {
resizeIframe();
$(window).resize(function () {
resizeIframe();
});
});

//调整iframe尺寸的方法
function resizeIframe() {
var expectWidth = $(document).width() * 0.9; //总宽度为屏幕宽度的0.9倍

$("iframe").each(function () {
expectWidth = $(this).parent().width();
$(this).height(expectWidth * $(this).height() / $(this).width());
$(this).width(expectWidth);
});
}

不使用jquery的代码，比较麻烦一点：

function resizeIAllframe() {
var clientWidth = document.body.clientWidth;
clientWidth = clientWidth.toString().replace("px", "");
clientWidth = clientWidth * 0.9;
console.log(clientWidth);

for (var j = 0; j < document.getElementsByTagName("iframe").length ; j++) {
resizeVideo(document.getElementsByTagName("iframe")[j], clientWidth);
}
}

function resizeIframe(objElement, exepectWidth) {
var flag = 0; //是否style中定义高宽
var height = objElement.height;
var width;
if (!height) {
height = objElement.style.height;
flag = 1;
}
if (flag) {
width = objElement.style.width;
} else {
width = objElement.width;
}

if (width) {
width = width.replace("px", "");
}
if (height) {
height = height.replace("px", "");
}
if (flag) {
objElement.style.width = exepectWidth + "px";
objElement.style.height = (exepectWidth * height / width) + "px";

} else {
objElement.width = exepectWidth + "px";
objElement.height = (exepectWidth * height / width) + "px";
}
}

//页面加载完后执行
window.onload = function () {
resizeIAllframe();
};

//窗口尺寸调整时执行
window.onresize = function () {
resizeIAllframe();
};

第二种方法，后台实现：

直接在服务器端用正则处理视频的尺寸，前提是需要客户端传过来一个期望宽度

/// <summary>
/// 转换视频的内容，主要处理视频的尺寸
/// </summary>
/// <param name="videoContent"></param>
/// <returns></returns>
private string ChangeVideoContent(string videoContent, int expectWidth)
{
//<iframe(.*?)</iframe>
//height="(?<height>\d*)"
string iframePattern = @"<iframe(.*?)</iframe>";
string heightPattern = @"height[:=][""]?(?<height>\d*?)(px| |"")";
string widthPattern = @"width[:=][""]?(?<width>\d*?)(px| |"")";
int sWidth, sHeight;

return Regex.Replace(videoContent, iframePattern, t =>
{
var heightStr = Regex.Match(t.Value, heightPattern, RegexOptions.Singleline).Groups["height"].Value;
if (string.IsNullOrEmpty(heightStr))
{
return t.Value;
}
sHeight = int.Parse(heightStr);

var widthStr = Regex.Match(t.Value, widthPattern, RegexOptions.Singleline).Groups["width"].Value;
if (string.IsNullOrEmpty(widthStr))
{
return t.Value;
}
sWidth = int.Parse(widthStr);

string result = Regex.Replace(t.Value, heightPattern, p => p.Value.Replace(p.Groups["height"].Value, (sHeight * expectWidth / sWidth).ToString()), RegexOptions.Singleline);

result = Regex.Replace(result, widthPattern, p => p.Value.Replace(p.Groups["width"].Value, (expectWidth).ToString()), RegexOptions.Singleline);

return result;
}, RegexOptions.Singleline);
}

每种方法都有自己的特点，自己感觉哪个合适用哪个。