Question

我有一个不占用全屏的网页视图。我将其设置为YouTube视频，以便在网络视图区域播放视频。当我更改设备的方向时，视图会调整大小但内容不会。如果我将缩放页面设置为适合网页视图上的标记，则会正确更改方向，但无论方向如何，视频右侧和底部始终都有空白区域。

如何让视频填充Web视图，并在没有浪费填充的情况下更改方向。另外，我如何让视频全屏播放，就像在iPhone上一样（这对我来说是一个可行的选择，跳过布局问题）

Answer 1

我阅读了本教程，并且能够解决问题。 http://webdesignerwall.com/tutorials/css-elastic-videos

基本上你可以将包含项目的大小设置为一个用于纵向的东西，另一个用于横向。

还要将对象嵌入代码设置为高度宽度为100％而不是固定宽度。

这是我的HTML：

<span class="youtube">
    <object type="application/x-shockwave-flash" id="ytPlayer" style="visibility: visible;" allowscriptaccess="always">
    </object>
</span>

这是我的javascript：

var ytswf = document.getElementById('ytPlayer');
var videoID = 'Nky9omXFZD4';
ytswf.outerHTML = "<object height=\"100%\" width=\"100%\" type=\"application/x-shockwave-flash\" data=\"http://www.youtube.com/v/" + videoID + "&amp;enablejsapi=1&amp;playerapiid=ytplayerObj&amp;rel=0&amp;fs=1&amp;autoplay=0&amp;egm=0\" id=\"ytPlayer\" style=\"visibility: visible;\" ><param name=\"allowFullScreen\" value=\"True\" /><param name=\"allowScriptAccess\" value=\"always\" /></object>";

这是我的css：

.youtube{width:432px; height:245px;}
@media only screen and (orientation:portrait)
{
   .youtube{width:702px; height:398px;}
}

Answer 2

我使用以下代码，它适用于我

    // css
    // You can add your own width and height values or insert this values using stringWithFormat
    NSString *css = @"<style type=\"text/css\">\
    .youtube{width:320px; height:363px;}\
    @media only screen and (orientation:portrait) { \
    .youtube{width:320px; height:363px;}\
    }\
    \
    @media only screen and (orientation:landscape) {\
    .youtube{width:480px; height:203px;}\
    }\
    </style>\
    ";

    // different format of urls for iOS 5 and iOS 6
    NSString *src = ([[[UIDevice currentDevice] systemVersion] compare:@"6" options:NSNumericSearch] == NSOrderedAscending)
    ? @"http://www.youtube.com/watch?v=%@?autoplay=1"        //  iOS  5
    : @"http://www.youtube.com/v/%@?autoplay=1";             //  iOS  6

    // inserting css in <head> and inserting src
    NSString *youTubeVideoHTML =  [NSString stringWithFormat:
                                   (@"<html><head>%@</head>\
                                    <body style=\"margin:0\">\
                                    <embed class=\"youtube\" id=\"yt\" src=\"%@\" type=\"application/x-shockwave-flash\" \
                                    ></embed>\
                                    </body></html>") , css , src  ];
    // setting YouTube video ID
    finalHtml = [NSString stringWithFormat: youTubeVideoHTML , videoID ];

    [self.webView loadHTMLString:finalHtml baseURL:nil];

在方向更改的Web视图中调整youtube视频的大小

2 个答案: