Start New Discussion within our Web Development Community

I want to show movie trailer by click on movie button. i have done this by using colorbox. i had include .js and .css file in my template.php file. and i prepare following code for this. but i can't able to do this. plz anyone guide me. how can i show trailer in my website? i had store trailer path in my database for partcular movies.

My code is as:

trailer.php

<?
require_once("template.php");

function main() {
    ?>
    <table width="100%" cellpadding="0" cellspacing="0">
        <tr>
            <td>
                <?php
                $sql = "select * from movie";
                $result = mysql_query($sql);
                ?>
                <table>
                    <tr>
                        <?php
                        $i = 0;

                        while ($rows = mysql_fetch_array($result)) {

                            if ($i % 3 == 0) {
                                echo '</tr><tr>';
                            }
                            ?>
                            <td>
                                <table width="100%" cellpadding="0" cellspacing="0">
                                    <tr>
                                        <td valign="center">
                                            <img src="<?php echo "images/thumbnail/" . $rows['image']; ?>" height="130" width="100" border="0" /><br>
                                        </td>
                                        <td valin="" width="200" style="padding-left: 10px;">
                                            <font size="4">
                                            <?php
                                            echo "<b>Stars</b>" . '<br>' . "<font size='3'>" . $rows['actor'] . "</font>" . '<br>';
                                            echo "<font size='3'>" . $rows['actress'] . "</font>" . '<br><br>';
                                            echo "<b>Director</b>" . '<br>' . "<font size='3'>" . $rows['director'] . "</font>" . '<br>';
                                            ?>
                                            </font>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td align="left" valign="center">
                                            <a href="trailer_redirect.php?movie_id=<? echo $rows['movie_id']; ?> ">
        <!--                                                <img src="images/buy_tickets.jpg" width="79" height="18" alt="buy_tickets" border="0"/>-->
                                                <input type="submit" value="View Trailer" name="view_trailer" />
                                            </a>

                                        </td>
                                        <td>&nbsp;</td>
                                    </tr>
                                </table>
                            </td>
                            <?php
                            $i++;
//                            if(isset($_POST['view_trailer'])) {
//                              header("location: trailer_redirect.php");
//                                }
                        }
                        ?>
                    </tr>

                </table>
            </td>
        </tr>
    </table>
    <?
}
?>

trailer_redirect.php

<?php
require_once 'template.php';
//require_once 'dbconfig.php';
function main() {
//get value of id that sent from address bar
$id = $_GET['movie_id'];
// Retrieve data from database 
$sql = "SELECT * FROM movie WHERE movie_id='$id'";
$result = mysql_query($sql);
$rows = mysql_fetch_array($result);
?>
<?php while($rows= mysql_fetch_array($result)){ ?>
<head>

    <style>
    body{font:12px/1.2 Verdana, sans-serif; padding:0 10px;}
    a:link, a:visited{text-decoration:none; color:#416CE5; border-bottom:1px solid #416CE5;}
    h2{font-size:13px; margin:15px 0 0 0;}
    </style>
    <script>
     $(document).ready(function(){
             $(".youtube").colorbox({iframe:true, innerWidth:425, innerHeight:344});
             $(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});});
//             $(".callbacks").colorbox({
//                 onOpen:function(){ alert('onOpen: colorbox is about to open'); },
//                 onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
//                 onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
//                 onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
//                 onClosed:function(){ alert('onClosed: colorbox has completely closed'); }
//         });

         //Example of preserving a JavaScript event for inline calls.
         $("#click").click(function(){ 
             $('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
             return false;
         });

     </script>
 </head>
 <body>
     <p><a class='youtube' href="<?php echo $rows['trailor_path']; ?>" title="The Knife: We Share Our Mother's Health">Flash / Video (Iframe/Direct Link To YouTube)</a></p>
 </body>
 <?php }
}
 ?>

I do not see on the colorbox site that they support video directly. You'll need to use the iframe option. So instead of linking to the video, you'll need to link to a dynamic webpage showing the embedded video.

check if your colorbox.css and jquery.colorbox.js exists. to use colorbox for youtube videos the href format should be like this

    <a class='youtube' href="http://www.youtube.com/v/Vo_0UXRY_rY" >

Here is a demo, please feel free to look at the source code. Please DO NOT make a direct link on my js and css files. That is all I am asking..

To add title on the colorbox, you will have to add title attribute to the link, like this

<a class='youtube' href="http://www.youtube.com/v/Vo_0UXRY_rY" title="This is Title">

Hi Diafol,

For the fullscreen, the colorbox event assignment to element example7 ( as defined on my demo) it was set to

        $(".example7").colorbox({width:"75%", height:"75%", iframe:true});

I just changed the % values for both width and height to 100%. :) pretty neat huh?

We can also load jwplayer on the colorbox just by referring to the player.swf and the youtube video id, but I got an email from google 6 weeks ago telling me that I cannot distribute anything that loads youtube videos on different player. I guess its fine for me to show demos in the google API community but cannot distribute.

thanks. but i have store all the trailer's path in my db. movie wise i had stored trailer path in my db table. and in trailer.php page i showing movie image, casts n director name and there is one button which is redirect to trailer_redirect.php file. i think u had refer this very well. so plz guide me. how i can display popup window and how can i redirect to youtube while user click on particuler button under movie image. i have refer your demo n code. but i m not able to understand clearly that actually what should i do? guide me plz i have never done this type of work

this is my template.php file and in dbconfig.php i have write database configration code.

<?php require_once 'dbconfig.php'; ?>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
        <link type="text/css" href="style.css" rel="stylesheet" />
        <link type="text/css" href="menu.css" rel="stylesheet" />
        <link type="text/css" href="menu_h.css" rel="stylesheet"/>
        <link type="text/css" href="jsCarousel-2.0.0.css" rel="stylesheet" />
        <link type="text/css" href="thumbnail_slider.css" rel="stylesheet" />
        <link rel="stylesheet" href="colorbox.css" />
        <script type="text/javascript" src="./jquery-ui/js/jquery-1.8.2.js"></script>
        <script type="text/javascript" src="menu.js"></script>
        <script type="text/javascript" src="jsCarousel-2.0.0.js"></script>
        <script type="text/javascript" src="jquery.validate.js"></script>
        <!-- menu script itself. you should not modify this file -->
        <script language="JavaScript" src="menu_h.js"></script>
        <!-- items structure. menu hierarchy and links are stored there -->
        <script language="JavaScript" src="menu_items.js"></script>
        <!-- files with geometry and styles structures -->
        <script language="JavaScript" src="menu_tpl.js"></script>
        <!--        for showing trailer-->
        <script src="colorbox/colorbox/jquery.colorbox.js"></script>
        <title>Online Cinema Ticket Booking</title>
    </head>
    <body>
        <table width="100%" cellpadding="0" cellspacing="0">
            <tr>
                <td width="10%" valign="top"></td>
                <td width="980" align="left" valign="top">
                    <table width="100%" cellpadding="0" cellspacing="0">
                        <tr><td align="left" valign="top" colspan="2"><?php require_once("header.php"); ?></td></tr>
                        <tr>
                            <?php 
                            if(stristr($_SERVER['SCRIPT_NAME'],'food.php')=="" && stristr($_SERVER['SCRIPT_NAME'],'book_ticket.php')=="" && stristr($_SERVER['SCRIPT_NAME'],'payment.php')=="" 
                                    && stristr($_SERVER['SCRIPT_NAME'],'contectus.php')=="") { ?>
                            <td align="left" valign="top" width="15%" style="padding-left: 10px;"><?php require_once("left_panel.php"); ?></td>
                            <?php } ?>
                            <td align="left" valign="top" style="height:400px;"><?php echo main(); ?></td> 
                        </tr>
                        <tr><td align="left" valign="bottom" colspan="2"><? require_once("footer.php"); ?></td></tr>
                    </table>
                </td>
                <td width="10%" valign="top"></td>
            </tr>
        </table>
    </body>
</html>

Hi,

if that is the case then you can use something like this..

    ## for example this is the while loop for the images, id, and title of your trailer.

    $query = "SELECT id,title, trailer_path, image FROM YOUR-DATBASE";

 while($row = mysql_fetch_array( $query )) {

 ## these are your images
 ## use trailer path or whatever column is holding the youtube video id
 ## this will create a popup

 echo '<a class='youtube' href="'. $row['trailer_path']" title="'. $row['title'] .'">';
 ## we use the thumbnail from youtube. The proper syntax in grabbing the thumbnail from youtube is like this per the API TOS.

 echo '<img width="155" height="150" src="http://i.ytimg.com/vi/'. $row['id'] .'/hqdefault.jpg" title="'. $row['title'] .'"/>';

 ## This button when click will take your visitor to youtube
 ## take a not of the proper url syntax.

 echo '<br/><a   href="http://www.youtube.com/watch?v='. $row['id'] .'"  class="button play"> Watch in Youtube </a><br/>';

 } 
 // end of while loop

What I have given you above is the full coding example of the trailer images page. If the image is clicked the trailer opens up in the colorbox, while a click on the button takes them to youtube.

The css for the button that will look like youtube's play button

    .button
{
        display: inline-block;
        white-space: nowrap;
        background-color: #ccc;
        background-image: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ccc));
        background-image: -webkit-linear-gradient(top, #eee, #ccc);
        background-image: -moz-linear-gradient(top, #eee, #ccc);
        background-image: -ms-linear-gradient(top, #eee, #ccc);
        background-image: -o-linear-gradient(top, #eee, #ccc);
        background-image: linear-gradient(top, #eee, #ccc);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#eeeeee', EndColorStr='#cccccc');
        border: 1px solid #777;
        padding: 0 1.5em;
        margin: 0.5em;
        font: bold  0.625em/1.8em Arial, Helvetica;
        text-decoration: none;
        color: #000;
        text-shadow: 0 1px 0 rgba(255,255,255,.8);
        -moz-border-radius: .2em;
        -webkit-border-radius: .2em;
        border-radius: .2em;
        -moz-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
        -webkit-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
        box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
}

.button:hover
{
        background-color: #ddd;
        background-image: -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#ddd));
        background-image: -webkit-linear-gradient(top, #fafafa, #ddd);
        background-image: -moz-linear-gradient(top, #fafafa, #ddd);
        background-image: -ms-linear-gradient(top, #fafafa, #ddd);
        background-image: -o-linear-gradient(top, #fafafa, #ddd);
        background-image: linear-gradient(top, #fafafa, #ddd);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#fafafa', EndColorStr='#dddddd');
}

.button:active
{
        -moz-box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset;
        -webkit-box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset;
        box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset;
        position: relative;
        top: 1px;
}

.button:focus
{
        outline: 0;
        background: #fafafa;
}    

.button:before
{
        background: #ccc;
        background: rgba(0,0,0,.1);
        float: left;
        width: 1em;
        text-align: center;
        font-size: 1.5em;
        margin: 0 1em 0 -1em;
        padding: 0 .2em;
        -moz-box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5);
        -webkit-box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5);
        box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5);
        -moz-border-radius: .15em 0 0 .15em;
        -webkit-border-radius: .15em 0 0 .15em;
        border-radius: .15em 0 0 .15em;
        pointer-events: none;
}

/* Hexadecimal entities for the icons */

.add:before
{
        content: "\271A";
}

.edit:before
{
        content: "\270E";
}

.delete:before
{
        content: "\2718";
}

.save:before
{
        content: "\2714";
}

.email:before
{
        content: "\2709";
}

.like:before
{
        content: "\2764";
}

.next:before
{
        content: "\279C";
}

.star:before
{
        content: "\2605";
}

.spark:before
{
        content: "\2737";
}

.play:before
{
        content: "\25B6";
}

Now, your images page should look like this, after implementing the button.

Please analyze the codes we have above, that is the closest example I can give. All you need to do is plug it in to your codes with very minor modifications.

I just updated my demo. To watch the video in the colorbox just click the thumbnail, to watch it on youtube, click on the play button below the thumbnail..

I hope this will help you to solve the problem you are trying to solve. Good luck to you..

one last thing, if you want to load the HD version of the youtube video (ONLY IF Available), add this to the colorbox target url

        rel=0&amp;hd=1

Like this

    href="http://www.youtube.com/watch?v='. $row['id'] .'rel=0&amp;hd=1"

The implementation example of this hd attribute can be viewed here . Click on the 6th thumbnail below the player. That is the HD=1 of that particular video. By the way, this particular demo is called player targetting. The onclick event result is being passed into the target iframe to create the no-reload effects.

Thnaks, I also able to do this after i had post my code. and i also follow your sugessetion but still there is little bit of change. i want to show trailer in popup window as color box pop up. have u seen colorbox example? there is one link for direct link to youtube. and they will show that example in their own popup not in youtube site. likewise i also want to do like that. plz guide me

This article has been dead for over six months. Start a new discussion instead.