1,105,585 Community Members

show movie trailer in popup window in my website

Member Avatar
MMadhavi
Newbie Poster
19 posts since Sep 2011
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

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 }
}
 ?>
Member Avatar
pritaeas
mod_pritaeas
11,315 posts since Jul 2006
Reputation Points: 1,420 [?]
Q&As Helped to Solve: 1,835 [?]
Skill Endorsements: 156 [?]
Moderator
Featured
Sponsor
 
0
 

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.

Member Avatar
diafol
Where are my eyes?
12,977 posts since Oct 2006
Reputation Points: 1,821 [?]
Q&As Helped to Solve: 1,848 [?]
Skill Endorsements: 92 [?]
Moderator
Featured
Sponsor
 
0
 

There are loads of js popups / dialogs out there if you really need them.

Member Avatar
veedeoo
Veteran Poster
1,016 posts since Oct 2011
Reputation Points: 314 [?]
Q&As Helped to Solve: 166 [?]
Skill Endorsements: 17 [?]
 
2
 

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">
Member Avatar
diafol
Where are my eyes?
12,977 posts since Oct 2006
Reputation Points: 1,821 [?]
Q&As Helped to Solve: 1,848 [?]
Skill Endorsements: 92 [?]
Moderator
Featured
Sponsor
 
0
 

Nice demo veed. What about the fullscreen video?

Member Avatar
veedeoo
Veteran Poster
1,016 posts since Oct 2011
Reputation Points: 314 [?]
Q&As Helped to Solve: 166 [?]
Skill Endorsements: 17 [?]
 
1
 

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.

Member Avatar
diafol
Where are my eyes?
12,977 posts since Oct 2006
Reputation Points: 1,821 [?]
Q&As Helped to Solve: 1,848 [?]
Skill Endorsements: 92 [?]
Moderator
Featured
Sponsor
 
0
 

Like it

Member Avatar
MMadhavi
Newbie Poster
19 posts since Sep 2011
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

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

Member Avatar
MMadhavi
Newbie Poster
19 posts since Sep 2011
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

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>
Member Avatar
veedeoo
Veteran Poster
1,016 posts since Oct 2011
Reputation Points: 314 [?]
Q&As Helped to Solve: 166 [?]
Skill Endorsements: 17 [?]
 
0
 

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.

Member Avatar
veedeoo
Veteran Poster
1,016 posts since Oct 2011
Reputation Points: 314 [?]
Q&As Helped to Solve: 166 [?]
Skill Endorsements: 17 [?]
 
0
 

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..

Member Avatar
veedeoo
Veteran Poster
1,016 posts since Oct 2011
Reputation Points: 314 [?]
Q&As Helped to Solve: 166 [?]
Skill Endorsements: 17 [?]
 
0
 

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.

Member Avatar
MMadhavi
Newbie Poster
19 posts since Sep 2011
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

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

Member Avatar
Nitesh Apte
Newbie Poster
1 post since Jun 2013
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 
You
This article has been dead for over three months: Start a new discussion instead
Post:
Start New Discussion
View similar articles that have also been tagged: