Positioning video in header
-
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
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.
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"
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!
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/
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.