在Web視圖中調整方向更改的YouTube視頻

我有一個不佔用全屏幕的網絡視圖。我將它設置爲YouTube視頻的網址，以在網絡查看區域播放視頻。當我改變設備的方向時，視圖改變大小，但內容不改變。如果我將縮放頁面設置爲適合網頁視圖的標記，它會正確更改方向，但無論方向如何，右側和底部的視頻周圍總是有空白區域。在Web視圖中調整方向更改的YouTube視頻

如何獲取視頻以填充Web視圖，並調整方向更改的大小而不浪費填充。另外我怎麼能讓視頻播放像iPhone一樣全屏播放（這對我來說是一個可行的選擇，跳過佈局問題）

來源

2012-05-24 ima747

我也對此感興趣。你解決了你的問題嗎？你是怎麼做到的？ – Petr

@ ima747嗨，我面臨同樣的問題。你解決了這個問題嗎？如果「是」，請發佈您的問題的答案。 – Yogendra

我閱讀本教程並能夠解決問題。 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;} 
}

來源

2012-10-17 16:41:03 Jim

你能解釋一下你的解決方案嗎？當你的js被叫？ – Petr

爲什麼你的CSS不包含景觀風格？ – Petr

我使用下面的代碼和它的作品對我來說

// 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];

來源

2013-01-22 11:48:37 Petr

在Web視圖中調整方向更改的YouTube視頻

回答

相關問題