I have youtube videos that show up in different locations on my site in the form of streams... the stream widths are variable so I have youtube movies at 100% width and 365px fixed height... But.... now I have a super narrow stream and the youtube videos are super tall and thin...
is there something like (in haml)
:width 100%
:height 40% of width
so I can always get the right aspect ratio...
I've been poking around the internet, but don't see any thing like this.
best.
Liam
Hi,
I would recomment Javascript. Going for jquery for in this case (i just prefer it).
Here is the JS that i quickly wrote
<script>
$(document).ready(function(){
// This is the class you use for your movie
var movie = $(".movie");
// This varible will get your width
var totalWidth = movie.width();
// Use this to get 40% of the height - notice the simple math
var ratio = parseInt((totalWidth) / 100 * 40);
// Set the height in your css
$(movie).css({
height: ratio
});
});
</script>If you a bit confused... here is a example should help out quite a bit
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Example</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
// This is the class you use for your movies
var movie = $(".movie");
// This varible will get your width
var totalWidth = movie.width();
// Use this to get 40% of the height - notice the simple math
var ratio = parseInt((totalWidth) / 100 * 40);
// Set the height in your css
$(movie).css({
height: ratio
});
});
</script>
<style>
p {
float: left
}
.movie {
width: auto;
height: 200px; /* Just adding this in as a reference */
float: left;
background: red;
}
</style>
</head>
<body>
<div class="movie">
<p>
Sample paragraph to test width Sample paragraph to test width
<br/>
Sample paragraph to test width Sample paragraph to test width
</p>
</div>
</body>
</html>Amazing solutin! It worked for me, the only thing needs to be done - is adding some kind of a listener so it will keep changing the size even after document.start...
Can you add it, please?
Hi,
It is possible to use hight and width ratio in % or px. you can use it any way.
The code below will update the element on window resize.
function updateHeight(element){
// This is the class you use for your movies
var targetElement = element;
// This varible will get your width
var totalWidth = targetElement.width();
// Use this to get 40% of the height - notice the simple math
var ratio = parseInt((totalWidth) / 100 * 40);
// Set the height in your css
targetElement.css({
height: ratio
});
}
$(window).resize(function(){
updateHeight($('.movie'))
});
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.