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

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

首先看一下优酷、土豆分享视频的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);
        }

 

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