Vídeo Redimensionável

Torne seus vídeos responsivos ao layout do seu website

Instruções

Para tornar seus vídeos responsivos ao layout do seu website, teste os exemplos para ver como funcionam, cole o seu embed e copie o novo embed responsivo. Aqui demonstramos duas opções: usando nossa API JS ou usando o Fluidvjs.

Obs: para usar o Fluidvjs é necessário ter o script do plugin em sua página.

Opções

Preview

Novo embed

<div id="player" style="margin-right:10px;"></div>

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<style>
	#previewContainer { padding: 0.3em 1.0em 1.0em 1.0em; margin-bottom: 0.5em; border: 2px dotted black; }
	.ui-resizable-helper { border: 2px dotted #00F; }
</style>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<script type="text/javascript" samba-player-api="player" src="https://player.sambatech.com.br/v3/samba.player.api.js?iframeURL=web4-7091"></script>
<!--<script type="text/javascript" samba-player-api="player" src="https://player.sambatech.com.br/v2current/samba.player.api.js"></script>-->
<script type="text/javascript">// <![CDATA[
	var playerConfig = {
		width: 640,
		height: 360,
	    responsive: true,
	    playerParams: {
	    	startOutput: '480p',
	    	html5: true
	    }
	};
	var player = new SambaPlayer("player", playerConfig);
// ]]></script>

Obs: Alguns editores de conteúdo como o Wordpress e Ghost podem alterar o código colado. Certifique-se se o código está igual ao informado aqui e, se possível, coloque o Javascript em um arquivo externo.