I’ve run into this problem before and couldn’t figure it out, but it’s basically just trying to insert two different embeds (youtube embed and a Reverbnation widget) and have them behave together.
I can get them to sit on top of each other… but when I insert them they take up the whole width of the page. I know there’s gotta be a way to limit the width of the widget right?
Here’s the code for the page – real simple
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://www.w3.org/2005/10/profile">
<meta content="text/html; charset=ISO-8859-1" http-equiv="Content-Type" />
<link rel="icon" type="image/png" href="http://static.tumblr.com/iorl8zv/yQxlnm3r2/favicon.png" />
<title>Official Pissing Graffiti--Rock-Industrial-Meaning</title>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-24167987-1']);
_gaq.push(['_setDomainName', 'pissinggraffiti.com']);
_gaq.push(['_setAllowHash', 'false']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body style="background-color: #666666; background-image: url('http://static.tumblr.com/iorl8zv/Me9ljgnyz/pgbgtumb.gif')">
<h1><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="180" height="150"><param name="movie" value="http://cache.reverbnation.com/widgets/swf/43/pro_widget.swf?id=artist_470177&posted_by=&skin_id=PWPS4008&font_color=FFFFFF"></param><param name="allowscriptaccess" value="always"></param><param name="allowNetworking" value="all"></param><param name="allowfullscreen" value="true"></param><param name="wmode" value="transparent"></param><param name="quality" value="best"></param><embed src="http://cache.reverbnation.com/widgets/swf/43/pro_widget.swf?id=artist_470177&posted_by=&skin_id=PWPS4008&font_color=FFFFFF" type="application/x-shockwave-flash" allowscriptaccess="always" allowNetworking="all" allowfullscreen="true" wmode="transparent" quality="best" width="180" height="150"></embed></object><br/>
<img style="visibility:hidden;width:0px;height:0px;" border=0 width=0 height=0 src="http://www.reverbnation.com/widgets/trk/43/artist_470177//t.gif" /></h1>
<div style="color: #ffb02e"><strong>
<center>New 8-track SAXAPHONE EP, by Pissing Graffiti</center></strong></div>
<div style="text-align: center">
<iframe width="560" height="349" src="http://www.youtube.com/embed/rn1SIXPZIgM" frameborder="0" allowfullscreen=""></iframe></div><!--
<div style="text-align: center;"><a href="http://music.pissinggraffiti.com"><img alt="" src="http://static.tumblr.com/iorl8zv/vIXlngmey/cover2.jpg" /></a></div-->
<div style="color: #ffb02d">
<center><font size="6">Free EP</font></center></div>
<div style="color: #ffb02e">
<center>Join the mailing list and immediately receive a link to a .zip file containing all 8 tracks with cover art and metadata.</center>
<center><br />
</center>
<center>
<div name="holder" style="border: 3px solid #FFB02E; width: 400px">
<div name="header" style="font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 13px; font-weight: bold; text-transform: uppercase; padding-left: 4px; padding-top: 8px; text-align: left; color: #FFB02E!important; line-height: 12px">
Join the mailing list</div>
<div style="text-align: center">
<form action="http://www.reverbnation.com/controller/fan_reach/add_email_direct/470177" target="_new" method="post"><span style="font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 14px; color: #fff !important">
Email Address: </span><input name="email" type="text" style="width: 220px" /> <input name="Submit" style="font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 9px; color: #333 !important; background-color: #FFF !important" value="SUBMIT" type="submit" /><br />
<br /></form></div></div></center>
<div><a style="color: #ffb02e" "="" href="http://blog.pissinggraffiti.com"></a>
<center><a style="color: #ffb02e" "="" href="http://blog.pissinggraffiti.com">Head over to the blog.</a>or <a style="color: #ffb02e" href="http://blog.pissinggraffiti.com/socialize">See what we're all about.</a></center></div></div>
</body>
</html>
I feel like such an idiot when I post here because I can never figure out how to format the code so it looks readable.
I appreciate any help you can give. I read through the W3 school tut and everytime I think I get it…i don’t and my page disappears.
Thanks guys! have a blessed one!
Ah, you just want the quote widget to be in line with the YouTube video? In that case, refer to this jsfiddle. Basically all I did was set
embeds,objects andiframes to display inline (to stay in line with each other), got rid of the<h1>tag you had, since it’s a block object, which would cause a line break, as well as deleted a<br />tag, and moved the quote widget above the YouTube video in the HTML.