Positioning video in header
AnonymousSeptember 19, 2013 at 2:30 am #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?
AnonymousSeptember 19, 2013 at 3:57 pm #40594
Did you remove it from the header? I can’t see it.
AnonymousSeptember 19, 2013 at 6:56 pm #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.
AnonymousSeptember 19, 2013 at 7:00 pm #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.
AnonymousSeptember 21, 2013 at 4:17 pm #40597
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"
AnonymousSeptember 22, 2013 at 12:06 am #40598
That works great!
I’m playing with some other stuff in there as well.
Thanks Prasanna SP!
AnonymousSeptember 22, 2013 at 12:46 am #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?
AnonymousSeptember 22, 2013 at 7:28 am #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">
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/
AnonymousSeptember 23, 2013 at 5:57 am #40601
Thanks! All questions answered. I was able to use Firebug to find another widget and move it around.
- You must be logged in to reply to this topic.