Dimensione a exibição inicial de um vídeo JW para a largura do dispositivo móvel

Comece com a metatag adequada para dispositivos móveis. Isso tentará dimensionar o elemento do corpo para o tamanho da tela.

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Usando o script JWPlayer 6.0 para incorporar o vídeo, você deve dar a ele uma largura e altura para que apareça na página. Na página que exibe o jogador e eu passo o nome do arquivo para puxar para o jogador. Portanto, quero que pareça apropriado no dispositivo ao abri-lo. É assim que obtenho e defino a largura. Eu uso o jQuery para obter a largura da janela.

<script type="text/javascript">
var win_props = {};
    win_props.width = $(window).width();

var mov_props = {};
mov_props.width = win_props.width - 20;
mov_props.height = (mov_props.width*.562);


jwplayer("vid").setup({
    file: 'http://path/to/file',
    image: 'http://path/to/image/file',
    height: mov_props.height,
    width: mov_props.width
});
</script>

Em um iPhone de 320 largura, ele deve se ajustar à largura corretamente. Se o telefone for segurado horizontalmente ao acessar a página, ele também deverá ter o tamanho correto. Outros dispositivos mais largos também serão exibidos. Na verdade, mesmo em um navegador da web, o vídeo será exibido na página nas proporções adequadas. Ele verifica a largura do navegador e exibe ao jogador 20 pixels a menos que essa largura. O * .562 mantém a altura na proporção adequada.

Exemplo . Redimensione a janela e recarregue para ver o funcionamento.