Skip navigation
tarasully
Currently Being Moderated

How place video in specific location on fluid layout

Jul 15, 2013 11:23 PM

Tags: #video #dreamweaver #insert #layout #cs6 #location #fluid

Hi-

I am new to fluid layout and work on pages very little. I used to know dreamweaver  but find myself teaching myself again for my husband. He is trying to help out a client..he is a photographer. Anyway I am trying to put a video in the right corner of this frame by the logo. I have attached a picture. This is a fluid layout, I think I know how to place the video but I am trying to put it in a specific location. I have attached a picture...please do not laugh at the color etc...this is what they want. put on your shades its BRIGHT!

Thanks in advance.

 

samplewebpicone.png

 
Replies
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Jul 16, 2013 12:17 AM   in reply to tarasully

    Can you post your code here so we can assist you with necessary CSS/ HTML markup?

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 16, 2013 12:38 PM   in reply to tarasully

    Copy & Paste the following code into a new, blank document.  Save As test.html.

    Replace YourVideo with your actual video file names.

     

     

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>HTML5 with Video</title>
    
    <!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
    
    <style>
    section {
    width: 80%;
    min-width: 600px;
    max-width: 1280;
    margin: 25px auto;
    background: #FF9;
    border: 18px solid #04ACEC;
    }
    
    header h1 {
    text-indent:-9999px; 
    font-size:0; 
    }
    
    #logo {
    float: left;
    border: 1px solid red;
    width: 225px;
    min-height:225px;
    }
    
    #video {
    float: right;
    margin-left: 5%;
    border: 1px solid green;
    width: auto;
    }
    
    article {
    clear: both;
    width: 100%;
    text-align: center
    }
    
    </style>
    </head>
    
    <body>
    <section>
    
    <header>
    <h1>SITE NAME</h1>
    </header>
    
    <div id="logo">
    <img src="images/homelogo_lime.png" alt="logo" width="225" height="225">
    </div>
    
    <!--begin video-->
    <div id="video">
    <video controls>
    <source src="YourVideo.ogg" type="video/ogg">
    <source src="YourVideo.mp4" type="video/mp4">
    <source src="YourVideo.webm" type="video/webm">
    </video>
    </div>
    <!--end video-->
    
    <article>
    <p>Authentic Original Italian Recipes <br>
    Ice Cream * Gelato * Sorbet * Sorbetto * Sherbet * Frozen Yogurt * Custard</p>
    <p>A Sanibel tradition for 33 Years!<br>
    Come of the World Famous Sanibel Krunch &amp; Dirty Sand Dollar Ice Creams</p>
    <p>Come See Why There’s Always A Crowd at Pinocchios</p>
    </article>
    
    </section>
    </body>
    </html>

     

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 16, 2013 3:52 PM   in reply to tarasully

    I don't see why not.

     

     

    Nancy O.

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Jul 16, 2013 11:08 PM   in reply to tarasully

    @tara: From Nancy's code, you can replace the HTML5 video markup with anything else - Youtube/ Vimeo, etc...

     

    <!--begin video-->
    <div id="video">
    <video controls>
    <source src="YourVideo.ogg" type="video/ogg">
    <source src="YourVideo.mp4" type="video/mp4">
    <source src="YourVideo.webm" type="video/webm">
    </video>
    </div>
    <!--end video-->

     

    Keep <div id="video">.....</div> intact as that works based on the CSS that Nancy has given you. Between these 2 lines, you can insert any video from any website like Vimeo or Youtube.

     
    |
    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