> I am newbie with jquery and also I am using BlockUI along with the
> youtube plugin
> (fromhttp://saidur.wordpress.com/2007/12/03/jquery-youtube-beta-plugin/)
> and I hope somebody can help me.
>
> I get the youtube plugin and is working fine. The only issue I have is
> the BlockUI is not using any of the css I define; instead is using the
> default. I am sure something is wrong with my code as follows:
>
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" x
> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";>
> <html xmlns="http://www.w3.org/1999/xhtml"; >
> <head>
> <script src="jquery-1.2.6.pack.js" type="text/javascript"></script>
> <script src="tube.js" type="text/javascript"></script>
> <script src="jquery.blockUI.js" type="text/javascript"></script>
> <script type="text/javascript">
> $(function() {
> $.blockUI.defaults.css = {};
>
> $('#videos').youtube({
> type: 'playlist'
> });});
>
> </script>
> <style type="text/css">
> /*<![CDATA[*/
> div.blockMsg, div.blockElement, div.blockPage {
> width: 425px; /* 40%;*/
> top: 0; /*30%;*/
> left: 0; /*30%;*/
> text-align: center;
> background-color: green;
> border: 3px solid #ddd;
> -moz-border-radius: 10px;
> -webkit-border-radius: 10px;
> filter:alpha(opacity=70);
> -moz-opacity:.70;
> opacity:.70;
> padding: 15px;
> color: #fff;
>
> }
>
> div.blockElement {
> background-color: yellow;
>
> }
>
> div.blockPage {
> background-color: red;}
>
> /*]]>*/
> </style>
> </head>
> <body>
> <div id="videos">
> <a href="javascript:$.youtube.playVideo('CiiuMzPLaok');"
> title="youtube video corporativo"><img src="images/minis/video1.jpg"
> width="100" height="170" alt="Video Corporativo" /></a>
> </div>
> </body>
> </html>
>
> I have to mention that the BlockUI version I have to use is the
> BlockUI Version 1.33 as a requirement for the youtube plugin.
>
> The issu I have is when I click in the link that plays the video the
> BlockUI is not the one I defined. I modified the youtube plugin in
> order to have the video larger (640px instead of 250px) and then the
> rounded box is 250px (hard coded in BlockUI) but the background color
> or the position is not the correct ones.
>
> Any suggestion is appreciated,
>
> Best regards
Your technique for overriding the styles is correct for the 2.0 line
of blockUI but I don't think it will work for earlier versions. The
simplest solution is probably just to update the youtube plugin to use
the latest blockUI plugin. I think all you'd need to do is update
this line:
216: $.blockUI(html);
to this:
216: $.blockUI({ message: html });
Mike
