4 svar · 1 008 visningar · startad av xtreme
Infogar en flash från vimeo med följande kod
<iframe src="http://player.vimeo.com/............" height="293" max-width="520" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
Den får då en fast storlek. Hur gör jag om jag vill att filmen ska anpassa sig efter webbläsarens fönsterstorlek? Om jag gör webbläsarens fönster mindre ska även filmen anpassas efter det.
Säkerligen kan du använda dig av javascript för att uppnå detta.
Säkerligen kan du använda dig av javascript för att uppnå detta.
Säkerligen ;-) förslag på hur?
Säkerligen ;-) förslag på hur?
Här kommer ett förslag med JQuery:
<!DOCTYPE html>
<html>
<title>Malmstroem.info | Playground </title>
<head>
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript">
$(function() {
// on page load
resizeFrame();
// on window resize
$(window).resize(function(){
resizeFrame();
});
});
var resizeFrame = function() {
var height = $(window).height();
var width = $(window).width();
$('#player-window').css('width',width - 20);
$('#player-window').css('height',height - 20);
};
</script>
</head>
<body>
<iframe src="http://player.vimeo.com/video/36813256" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" id="player-window"></iframe>
</body>
</html>
Se resultat: http://www.malmstroem.info/playground (testat i IE9)
..eller så använder du enbart CSS, ex:
<!DOCTYPE html>
<html>
<head>
<style>
.video-container {
position:relative;
padding-bottom:56.25%; /* 16:9 */
height:0;
overflow:hidden;
}
.video-container iframe{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
</style>
</head>
<body>
<div class="video-container">
<iframe src="http://player.vimeo.com/video/36813256" height="293" max-width="520" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
</div>
</body>
</html>