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'))       
            });
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.