Positioning video in header

  • BigBlueMan


    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?



    Prasanna SP


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



    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.



    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


    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.


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


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



    That works great!

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

    Thanks Prasanna SP!



    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


    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">

    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/



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


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

You must be logged in to reply to this topic.