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?
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.
To align it to the right,
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"
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,
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/
You must be logged in to reply to this topic.