Изменение размера youtube видео в веб-представление при изменении ориентации

У меня есть веб-представление, которое не занимает весь экран. Я установил URL-адрес видео YouTube для воспроизведения видео в области просмотра веб-страниц. Когда я меняю ориентацию устройства, вид изменяется, но контент его нет. Если я установил страницу весов в соответствии с флагом в веб-представлении, она правильно изменит ориентацию, но всегда всегда будет свободное пространство вокруг видео справа и внизу, независимо от ориентации.Изменение размера youtube видео в веб-представление при изменении ориентации

Как я могу получить видео, чтобы заполнить веб-представление и изменить размер с изменением ориентации без потери пустого пространства. В качестве альтернативы, как я могу сделать полноэкранное воспроизведение видео, как на 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

Изменение размера youtube видео в веб-представление при изменении ориентации

ответ

Смежные вопросы