Positioning video in header

  • BigBlueMan

    #8165

    I’m experimenting with putting a video in the header.

    I installed the graphic hook into the header, and used a video widget plug in. Works perfect, but it is aligned to the left side of the header. Is there a way to position it differently? As in to the far right?

    Thanks.

    ed

    Prasanna SP

    #40594

    Did you remove it from the header? I can’t see it.

    BigBlueMan

    #40595

    This is on a new site. http://www.mickeyopolis.com. Currently in development.

    I had it up and running last night. Played with it a bit and then was unable to get it back up and running using the exact same code. Strange indeed. I haven’t played with it this morning.

    BigBlueMan

    #40596

    I just looked. You can see the word ‘Necessary?’ above the old banner which I put in the widget for test purposes. But the video itself no longer comes through. It did last night.

    Prasanna SP

    #40597

    To align it to the right,

    #videosidebar-4 {
    margin-left: 720px;
    }

    In your embed code, there is a space in source URL, which is preventing the video from appearing.

    Change,

    <embed src="http://www.youtube.com/v/WzFea6YdQ9Y ?autoplay=1&loop=0&rel=0"

    to

    <embed src="http://www.youtube.com/v/WzFea6YdQ9Y?autoplay=1&loop=0&rel=0"

    BigBlueMan

    #40598

    That works great!

    I’m playing with some other stuff in there as well.

    Thanks Prasanna SP!

    BigBlueMan

    #40599

    One final question. In the future, if I want to use custom CSS on other widgets, where do you get the exact name to access them (as in #videosidebar for the example), and what significance does #4 have in the first line of the code?

    Thanks again!

    Prasanna SP

    #40600

    Here is the source code of that widget.

    <div id="videosidebar-4" class="sidebar-wrap clearfix videosidebar">
    <object width="256" height="192">
    <param name="allowfullscreen" value="true" />
    <param name="allowscriptaccess" value="always" />
    <param name="movie" value="http://www.youtube.com/v/WzFea6YdQ9Y?autoplay=0&loop=0&rel=0" />
    <param name="wmode" value="transparent">
    <embed src="http://www.youtube.com/v/WzFea6YdQ9Y?autoplay=0&loop=0&rel=0" type="application/x-shockwave-flash" wmode="transparent" allowfullscreen="true" allowscriptaccess="always" width="256" height="192">
    </embed>
    </object>
    </div>

    As you can see, the div id is videosidebar-4. We target div IDs with a # and classes with a dot (.) in CSS. So, to change the position of that widget, you would write CSS code like this,

    #videosidebar-4 {
    margin-left: 720px;
    }

    You can use Firebug to inspect HTML and modify style on the fly.

    Josh has a good tutorial on Firebug here – http://www.joshlobe.com/2011/10/using-mozilla-firebug-to-inspect-css-files/

    BigBlueMan

    #40601

    Thanks! All questions answered. I was able to use Firebug to find another widget and move it around.

    ed

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.