Solved

Float YouTube Embedded Video

Posted on 2010-08-18
6
745 Views
Last Modified: 2012-06-21
I am trying to float a YouTube embedded video on my site.  I surrounded video with a div tag but it is still not working.  What am I doing wrong?

http://myrockyknoll.com/index_new.asp

 #video_new
 {
 z-index:1;
 float:right;
 }
<div class="video_new"><object width="300" height="224" class="video"><param name="movie" value="http://www.youtube.com/v/kUGnrQLU7mw?fs=1&amp;hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/kUGnrQLU7mw?fs=1&amp;hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="300" height="224"></embed></object>

   </div>

Open in new window

0
Comment
Question by:nsitedesigns
  • 2
  • 2
  • 2
6 Comments
 
LVL 70

Assisted Solution

by:Jason C. Levine
Jason C. Levine earned 100 total points
ID: 33466846
You need to declare a width on the floated element.
0
 

Author Comment

by:nsitedesigns
ID: 33466897
Nope.  That didn't work.  : (
      

http://myrockyknoll.com/index_new.asp
http://myrockyknoll.com/rk.css
#video_new
 {
 z-index:1;
 float:right;
 width:300px;
 }

Open in new window

0
 
LVL 4

Accepted Solution

by:
Morrisproject earned 400 total points
ID: 33466912
ok.... where to start :-)

Firstly on the link, it is in a <p> tag the div you mentioned does not exist on the live page.

Now for your code you have given the div a class, but in your CSS your referring to an ID (#).

Change the CSS to be this:
.video_new
 {
 z-index:1;
 float:right;
width:100%;
text-align:center;
 }

NB: Note the change of # to a (.) instead. You can play with the other properties when it starts to move :-)
0
How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 33466915
Right now I don't see a div tag for the video on index_new.asp...
0
 

Author Comment

by:nsitedesigns
ID: 33466954
Morrisproject:  The div tag was there but I was trying to fix it so when you went in to look, maybe it was during my attempt to fix. I did replace the # with a . and that did the trick.  I thought # was for if there was no other instance of this div on the website.
0
 
LVL 4

Expert Comment

by:Morrisproject
ID: 33467191
You are correct if that would be the only instance you can use a #

However, that means the div would be an id, so the HTML would be
<div id="video_new">.....

As it was a class, you need a dot instead, which also means the same properties can be applied to another video in the same class in the page...
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
Any business that wants to seriously grow needs to keep the needs and desires of an international audience of their websites in mind. Making a website friendly to international users isn’t prohibitively expensive and can provide an incredible return…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

758 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now