Skip navigation
Currently Being Moderated

FLV files in Fluid Grid

Apr 30, 2013 1:55 AM

When I insert an FLV file into my fluid grid layout the movie scales but the height of the surrounding white box stays fixed. How can I resolve this?

 
Replies
  • Currently Being Moderated
    Apr 30, 2013 3:22 AM   in reply to Glove4Help

    Look at the New Hotness here http://zurb.com/word/responsive-video

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 30, 2013 3:56 AM   in reply to Glove4Help

    All markup, serverside script and clientside script works outside of DW. I tend to use Sublime Text a lot together with DW in the cases where DW is better.

     

    Foundation is a framework, consisting of markup, CSS and JS.

     

    In the case of FLV within a responsive web design, you only need a portion of the framework Have a look here on implementation http://foundation.zurb.com/docs/components/flex-video.html. It is well worth learning.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 30, 2013 4:19 AM   in reply to Glove4Help

    1. Create a blank document in DW called junk.html or similar.

    2. Copy and paste the following into your document and save the document. The highlighted part is the markup for the video.

    3. View in your favourite browser.

    <!doctype html>

    <!--[if IE 8]><html class="no-js lt-ie9" lang="en"><![endif]-->

    <!--[if gt IE 8]><!-->

    <html class="no-js" lang="en">

    <!--<![endif]-->

    <head>

    <meta charset="utf-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Foundation Docs: Flex Video</title>

    <link rel="stylesheet" href="http://foundation.zurb.com/docs/assets/normalize.css" />

    <link rel="stylesheet" href="http://foundation.zurb.com/docs/assets/docs.css" />

    <script src="http://foundation.zurb.com/docs/assets/vendor/custom.modernizr.js"></script>

    </head>

     

    <body class="antialiased">

    <div class="row">

      <div class="large-12 columns">

        <div class="flex-video">

          <iframe width="420" height="315" src="http://www.youtube.com/embed/0_EW8aNgKlA" frameborder="0" allowfullscreen></iframe>

        </div>

      </div>

    </div>

    <script src="http://foundation.zurb.com/docs/assets/docs.js"></script>

    <script>

          $(document)

            .foundation();

        </script>

    </body>

    </html>

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 30, 2013 5:49 AM   in reply to Glove4Help

    No, the values are directly relevant to the size of the video. To see what happens when the container is narrowed down change

    <div class="large-12 columns">

    to

    <div class="large-6 columns">

    Also notice, that after having made the above change, that in smaller screen sizes the video reverts to full width. This is responsive web design at its best.

     

    All the more reason to try the complete Foundation framework 

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 30, 2013 6:23 AM   in reply to Glove4Help

    The highlighted are the containing elements for the video

    <div class="row">

      <div class="large-12 columns">

        <div class="flex-video">

          <iframe width="420" height="315" src="http://www.youtube.com/embed/0_EW8aNgKlA" frameborder="0" allowfullscreen></iframe>

        </div>

    </div>

    </div>

    If you do not want to use the Foundation framework, replace the conatiner with the container in your document

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 30, 2013 6:21 AM   in reply to Glove4Help

    Simply copy the code within the files and paste them into your own files.

     

    For instance, to create a local copy of normalize.css

    1. create a new file in DW called normalize.css

    2. go to http://foundation.zurb.com/docs/assets/normalize.css

    3. copy the code in http://foundation.zurb.com/docs/assets/normalize.css

    4. paste the code into the local normalize.css and save

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 30, 2013 6:22 AM   in reply to Glove4Help

    No, these files only serve to create the effect on the video as you required.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 30, 2013 6:42 AM   in reply to Glove4Help

    No idea! They certainly do not come from the markup and code that I have given you.

     

    Can you supply a link to your site?

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points