1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

[GET] How to Show Custom "Suggested" Videos at End of YouTube Vid AND Forge Their Stats

Discussion in 'Social Networking Sites' started by crazyflx, Jun 6, 2013.

  1. crazyflx

    crazyflx Elite Member

    Joined:
    Nov 9, 2009
    Messages:
    1,674
    Likes Received:
    4,825
    Location:
    http://CRAZYFLX.COM
    Home Page:
    Here you'll learn how to control what videos show as the "suggested videos" at the end of any YouTube video. In addition, you can forge the stats about each one (who uploaded it, how long it is, how many views it has had, whether when they click on it they see something entirely different than what they clicked on and so on). It actually goes even deeper than that :)

    I'm including a demo URL so you can see this in action. Check it out here:

    Demo URL: http://crazyflx.com/youtube/suggested.html
    Demo URL 2 (don't view until viewing first demo URL): http://crazyflx.com/youtube/featured2.html <- EDIT: this demo does not have all of the "fixes" you'll find in my posts below. Demo URL 1 is the latest version (as of the point I was last able to edit the OP and has all the fixes you'll see in my two "fix" posts below). The code snippets in this post will get you what you see in version 1 (100% working & with all the fixes unless otherwise designated further down in this thread in later replies).

    I have not uploaded a single video you'll see as the "suggested videos" after the video on the right ends. Although, you'll see that it shows that I have.

    The second demo URL is to demonstrate that by changing the embed size of the video you do NOT need to reconfigure anything. I wrote the code so that it will scale your fake suggested videos right along with the size of the embedded video. In other words if you want to show a larger or smaller embed, you don't need to do anything at all...just change the dimensions of the embedded video in the settings, and the code will take care of the rest.

    Now, a bit of backstory first for those who aren't aware:

    When you embed a YouTube video, after the video is over that video will display "suggested" videos related to the video you just watched. There is an option when embedding a YouTube video to disable these suggested videos. YouTube explicitly states that showing "suggested videos" of your choice cannot be done and that they select suggested videos on their own. So you can either show what YouTube wants, or show nothing at all (until now anyway ;) )



    Now here are the specifics about what you can do with the script to follow:

    At the end of the video, you'll be able to control, in every aspect, what each of the "suggested videos" on the "suggested videos" screen. You'll be able to do the following for every "suggested video" on the final screen:


    • Set what the video is
    • Set the screenshot of the video
    • Set the title of the video
    • Set the number of views of the video
    • Set how long the video is
    • Set the uploader of the video
    • Set the video to show a video that is completely unrelated to what the title & screenshot show it as
    • Literally everything without any limitations at all



    Now, here is the "why bother" part (if you don't already see the benefits):

    In my opinion, BOTH of those options given by YouTube (show what THEY think the suggested videos should be, or show none at all) are awful. On the one hand, I want visitors to stay on my site, and videos do a great job of that, so showing suggested videos is a good idea...but what happens when the suggested video is from a competitor...what happens when the visitor gets so sidetracked because a "happy cat" video showed up in my suggested videos after they got finished watching my celeb related video (now their brain is somewhere else) and the list goes on and on.

    The alternative is to shut them off altogether...well, this sucks also, because now I don't even have the opportunity that they might see another one of my videos or another video that is just as compelling as mine is or related to mine to keep them on my site longer than they would have without a related video.

    Using this, you can set the suggested videos to be only videos you have HANDPICKED to show up. In addition, you can "rename" them to have more interesting titles (should you see fit). That means you will no longer be giving views to competitors and you'll keep you traffic longer.




    The "blackhat" benefits you're getting:

    Since nobody can set suggested videos at the end, nobody will know that you've done it. What they see at the end of the video they just played will be accepted immediately as fact, because they are going to think that it is YouTube displaying the information, not you.

    Imagine you take 12 videos that you've uploaded, and set them all to shows as each having over 1,000,000 views each.

    Imagine you take 12 videos that you've uploaded, and set them all to show as being uploaded by celebrities or big household names.

    Imagine you take 12 videos that you've uploaded, and set them all to show a screenshot & title of one video, but play another video entirely when it's clicked on.

    Imagine you take 12 videos that you've uploaded, and set them all to show as being just thirty seconds long (even though they might be four minutes long...people like to click & watch videos that they think are short, and once they've discovered it's longer than they thought, you'll hopefully already have them hooked...a click & view you wouldn't have gotten otherwise).

    Imagine you take 12 videos that you've uploaded, and set them all to do all of the above! (yes, you can do that also).




    Alright, here it is so you can get started:

    Please note - I have set this code up so the only code that needs to be modified is within a "settings" section where you'll type plain text only (no code). The only code that needs to be modified is the code you'll find in STEP 2 of the following instructions.

    STEP 1: The following code needs to go between your pages <head></head> tags:

    Code:
    <script src="http://www.youtube.com/player_api"></script>
    The following "styling" needs to go between your pages <head></head> tags:

    Code:
    .screenshot {
    width:24.5%;
    height:32.7%;
    float:left;
    margin:1px;
    background-color:#000;
    position:relative;
    cursor:pointer;
    }
    
    
    .overlaycontainer {
        width:100%;
        height:100%;
        z-index:2;
        display:none;
        position:absolute;
    }
    
    
    .overlay {
        width:100%;
        height:100%;
        z-index:1;
        opacity:0.8;
        background-color:#000;
        filter: alpha(opacity=80);
        position:absolute;
    }
    
    
    .title {
        overflow:hidden;
        position:absolute;
        padding-top:10px;
        padding-left:14px;
        padding-right:14px;
        color:#fff;
        font-family:Arial, Helvetica, sans-serif;
        font-size:13px;
        z-index:2;
    }
    
    
    .submitter {
        color:#999999;
        font-family:Arial, Helvetica, sans-serif;
        font-size:12px;
        [COLOR=#ff0000]padding-bottom:19px[/COLOR];
        padding-left:14px;
        position:absolute;
        z-index:2;
        bottom:0px;    
    }
    
    
    .views {
        color:#666666;
        font-family:Arial, Helvetica, sans-serif;
        font-size:11px;
        [COLOR=#ff0000]padding-bottom:7px;[/COLOR]
        padding-left:14px;
        position:absolute;
        z-index:2;
        bottom:0px;
    }
    
    
    .length {
        color:#666666;
        font-family:Arial, Helvetica, sans-serif;
        font-size:11px;
        [COLOR=#ff0000]padding-bottom:7px;[/COLOR]
        padding-right:14px;
        position:absolute;
        z-index:2;
        bottom:0px;
        right:0px;
    }
    

    STEP 2: The following code needs to be the first thing after your pages OPENING <body> tag (it will look just like that). This bit of code, is the code where you'll be "setting" all the stats about each video. Consider the settings portion of the code.

    Here is an explanation for each setting:

    mainvideo = here is where you'll enter the identifying bit of the main video you want to be displayed (the video that shows first. On the demo URL, this would be the family guy video you see). You'll notice you're not entering a URL, but rather just the string that comes at the end of the YouTube video after the "=" sign.
    mainvideowidth = the width in pixels you want the embedded video to be
    mainvideoheight = the height in pixels you want the embedded video to be
    img = this sets the desired thumbnail of the suggested video that will be displayed at the end. It does not have to be related to the video it will link to.
    newvid = this sets what video will display when it's clicked. Just as "mainvideo" only required the string from the end of the desired youtube vid, so do these variables
    vidtitle = this sets what the suggested video will show as it's title. It does not have to be related to the video it will link to.
    views = this sets the number of views you want to show the suggested video as having
    length = this sets how long you want to show the suggested video as being

    You'll see you need to set all of the above for each suggested video using the variables in the code below. Again, The following code needs to be the first thing after your pages OPENING <body> tag (it will look just like that).
    Code:
    <script>
    var mainvideo = 'RFZrzg62Zj0';
    var mainvideowidth = 550;
    var mainvideoheight= 350;
    
    
    var img1 = 'http://crazyflx.com/youtube/images/1bhw.png';
    var newvid1 = '_CMogwTy6Zw';
    var vid1title = 'BlackHatWorld - The Best Forum in the World';
    var vid1submitter = 'crazyflx';
    var vid1views = '27,127,860';
    var vid1length = '1:21';
    
    
    var img2 = 'http://crazyflx.com/youtube/images/2women.png'
    var newvid2 = 'iDYJ4SBxbiQ';
    var vid2title = 'Super Hot Women in Hot Cars';
    var vid2submitter = 'crazyflx';
    var vid2views = '101,421,320';
    var vid2length = '10:91';
    
    
    var img3 = 'http://crazyflx.com/youtube/images/3car.png'
    var newvid3 = 'uw6xEmOa2eI';
    var vid3title = 'I Own a Lamborghini - Check it Out';
    var vid3submitter = 'crazyflx';
    var vid3views = '11,031,999';
    var vid3length = '0:60';
    
    
    var img4 = 'http://crazyflx.com/youtube/images/4mansion.png';
    var newvid4 = 'UdeSTljtrIA';
    var vid4title = 'Check Out Beautiful Mansions to Buy';
    var vid4submitter = 'crazyflx';
    var vid4views = '45,987,614';
    var vid4length = '1:14';
    
    
    var img5 = 'http://crazyflx.com/youtube/images/5xrumer.png';
    var newvid5 = 'PWT4mA1WabQ';
    var vid5title = 'Worlds Best Xrumer Tutorial';
    var vid5submitter = 'crazyflx';
    var vid5views = '671,419';
    var vid5length = '15:42';
    
    
    var img6 = 'http://crazyflx.com/youtube/images/6scrapebox.png';
    var newvid6 = 'SwaLo10ck9U';
    var vid6title = 'Worlds Best Scrapebox Tutorial';
    var vid6submitter = 'crazyflx';
    var vid6views = '419,753';
    var vid6length = '19:21';
    
    
    var img7 = 'http://crazyflx.com/youtube/images/7lesbian.png';
    var newvid7 = 'HpaEkkbPEDs';
    var vid7title = 'Super Hot Lesbian Makeout Session';
    var vid7submitter = 'crazyflx';
    var vid7views = '1,101,994,327';
    var vid7length = '101:27';
    
    
    var img8 = 'http://crazyflx.com/youtube/images/8olderwoman.png';
    var newvid8 = 'n4Rhe5MoqFA';
    var vid8title = 'Crazy Hot Cougar';
    var vid8submitter = 'crazyflx';
    var vid8views = '897,675';
    var vid8length = '45:32';
    
    
    var img9 = 'http://crazyflx.com/youtube/images/9veyron.png';
    var newvid9 = 'vCSyflSV42Q';
    var vid9title = 'Just Bought a Bugatti';
    var vid9submitter = 'crazyflx';
    var vid9views = '724,871';
    var vid9length = '6:29';
    
    
    var img10 = 'http://crazyflx.com/youtube/images/10richlifestyle.png';
    var newvid10 = 'GO723bDNikc';
    var vid10title = 'Learn How to Live a Rich Lifestyle';
    var vid10submitter = 'crazyflx';
    var vid10views = '109,500';
    var vid10length = '4:58';
    
    
    var img11 = 'http://crazyflx.com/youtube/images/11ferrari.png';
    var newvid11 = '8PQ4VGMDMQU';
    var vid11title = 'Love My Ferrari to Death';
    var vid11submitter = 'crazyflx';
    var vid11views = '750,540';
    var vid11length = '2:00';
    
    
    var img12 = 'http://crazyflx.com/youtube/images/12mansion.png';
    var newvid12 = 'c99zA6_oa7E';
    var vid12title = 'Check Out Beach House Mansion';
    var vid12submitter = 'crazyflx';
    var vid12views = '000,000';
    var vid12length = '0:00';
    </script>
    
    STEP 3: The following code needs to go where you want to embed your video, as long as it's after the above code and before the closing </body> tag:

    Code:
    <div id="videocontainer">
    
    
        <div id="featuredcontainer" style="width: 630px; height: 350px; position:absolute; display:none; background-color:#000;" >
            <div class="screenshot" onclick="changevid('1');" onmouseover="toggleoverlay('overlay1');" onmouseout="toggleoverlay('overlay1');">
                <div id="overlay1" class="overlaycontainer"></div><img id="screenshot1" src="" width="100%" height="100%"/>
            </div>
            <div class="screenshot" onclick="changevid('2');" onmouseover="toggleoverlay('overlay2');" onmouseout="toggleoverlay('overlay2');">
                <div id="overlay2" class="overlaycontainer"></div><img id="screenshot2" src="" width="100%" height="100%"/>
            </div>
            <div class="screenshot" onclick="changevid('3');" onmouseover="toggleoverlay('overlay3');" onmouseout="toggleoverlay('overlay3');">
                <div id="overlay3" class="overlaycontainer"></div><img id="screenshot3" src="" width="100%" height="100%"/>
            </div>
            <div class="screenshot" onclick="changevid('4');" onmouseover="toggleoverlay('overlay4');" onmouseout="toggleoverlay('overlay4');">
                <div id="overlay4" class="overlaycontainer"></div><img id="screenshot4" src="" width="100%" height="100%"/>
            </div>
            <div class="screenshot" onclick="changevid('5');" onmouseover="toggleoverlay('overlay5');" onmouseout="toggleoverlay('overlay5');">
                <div id="overlay5" class="overlaycontainer"></div><img id="screenshot5" src="" width="100%" height="100%"/>
            </div>
            <div class="screenshot" onclick="changevid('6');" onmouseover="toggleoverlay('overlay6');" onmouseout="toggleoverlay('overlay6');">
                <div id="overlay6" class="overlaycontainer"></div><img id="screenshot6" src="" width="100%" height="100%"/>
            </div>
            <div class="screenshot" onclick="changevid('7');" onmouseover="toggleoverlay('overlay7');" onmouseout="toggleoverlay('overlay7');">
                <div id="overlay7" class="overlaycontainer"></div><img id="screenshot7" src="" width="100%" height="100%"/>
            </div>
            <div class="screenshot" onclick="changevid('8');" onmouseover="toggleoverlay('overlay8');" onmouseout="toggleoverlay('overlay8');">
                <div id="overlay8" class="overlaycontainer"></div><img id="screenshot8" src="" width="100%" height="100%"/>
            </div>
            <div class="screenshot" onclick="changevid('9');" onmouseover="toggleoverlay('overlay9');" onmouseout="toggleoverlay('overlay9');">
                <div id="overlay9" class="overlaycontainer"></div><img id="screenshot9" src="" width="100%" height="100%"/>
            </div>
            <div class="screenshot" onclick="changevid('10');" onmouseover="toggleoverlay('overlay10');" onmouseout="toggleoverlay('overlay10');">
                <div id="overlay10" class="overlaycontainer"></div><img id="screenshot10" src="" width="100%" height="100%"/>
            </div>
            <div class="screenshot" onclick="changevid('11');" onmouseover="toggleoverlay('overlay11');" onmouseout="toggleoverlay('overlay11');">
                <div id="overlay11" class="overlaycontainer"></div><img id="screenshot11" src="" width="100%" height="100%"/>
            </div>
            <div class="screenshot" onclick="changevid('12');" onmouseover="toggleoverlay('overlay12');" onmouseout="toggleoverlay('overlay12');">
                <div id="overlay12" class="overlaycontainer"></div><img id="screenshot12" src="" width="100%" height="100%"/>
            </div>
        </div>
        <div id="mainvideo"></div>
    </div>
    
    STEP 4 (final step): Put the following code as the VERY LAST BIT OF CODE that appears BEFORE the closing </body> tag:

    Code:
    <script>
    document.getElementById('featuredcontainer').style.width = mainvideowidth + 'px';
    document.getElementById('featuredcontainer').style.height = mainvideoheight - 36 + 'px';
    
    
    vid1title = vid1title.substring(0,37) + '...';
    document.getElementById('screenshot1').src = img1;
    document.getElementById('overlay1').innerHTML = '<div class="title">' + vid1title + '</div>' + '<div class="submitter">' + vid1submitter + '</div>' + '<div class="views">' + vid1views + '</div>' + '<div class="length">' + vid1length + '</div>' + '<div class="overlay"></div>';
    
    
    vid2title = vid2title.substring(0,37) + '...';
    document.getElementById('screenshot2').src = img2;
    document.getElementById('overlay2').innerHTML = '<div class="title">' + vid2title + '</div>' + '<div class="submitter">' + vid2submitter + '</div>' + '<div class="views">' + vid2views + '</div>' + '<div class="length">' + vid2length + '</div>' + '<div class="overlay"></div>';
    
    
    vid3title = vid3title.substring(0,37) + '...';
    document.getElementById('screenshot3').src = img3;
    document.getElementById('overlay3').innerHTML = '<div class="title">' + vid3title + '</div>' + '<div class="submitter">' + vid3submitter + '</div>' + '<div class="views">' + vid3views + '</div>' + '<div class="length">' + vid3length + '</div>' + '<div class="overlay"></div>';
    
    
    vid4title = vid4title.substring(0,37) + '...';
    document.getElementById('screenshot4').src = img4;
    document.getElementById('overlay4').innerHTML = '<div class="title">' + vid4title + '</div>' + '<div class="submitter">' + vid4submitter + '</div>' + '<div class="views">' + vid4views + '</div>' + '<div class="length">' + vid4length + '</div>' + '<div class="overlay"></div>';
    
    
    vid5title = vid5title.substring(0,37) + '...';
    document.getElementById('screenshot5').src = img5;
    document.getElementById('overlay5').innerHTML = '<div class="title">' + vid5title + '</div>' + '<div class="submitter">' + vid5submitter + '</div>' + '<div class="views">' + vid5views + '</div>' + '<div class="length">' + vid5length + '</div>' + '<div class="overlay"></div>';
    
    
    vid6title = vid6title.substring(0,37) + '...';
    document.getElementById('screenshot6').src = img6;
    document.getElementById('overlay6').innerHTML = '<div class="title">' + vid6title + '</div>' + '<div class="submitter">' + vid6submitter + '</div>' + '<div class="views">' + vid6views + '</div>' + '<div class="length">' + vid6length + '</div>' + '<div class="overlay"></div>';
    
    
    vid7title = vid7title.substring(0,37) + '...';
    document.getElementById('screenshot7').src = img7;
    document.getElementById('overlay7').innerHTML = '<div class="title">' + vid7title + '</div>' + '<div class="submitter">' + vid7submitter + '</div>' + '<div class="views">' + vid7views + '</div>' + '<div class="length">' + vid7length + '</div>' + '<div class="overlay"></div>';
    
    
    vid8title = vid8title.substring(0,37) + '...';
    document.getElementById('screenshot8').src = img8;
    document.getElementById('overlay8').innerHTML = '<div class="title">' + vid8title + '</div>' + '<div class="submitter">' + vid8submitter + '</div>' + '<div class="views">' + vid8views + '</div>' + '<div class="length">' + vid8length + '</div>' + '<div class="overlay"></div>';
    
    
    vid9title = vid9title.substring(0,37) + '...';
    document.getElementById('screenshot9').src = img9;
    document.getElementById('overlay9').innerHTML = '<div class="title">' + vid9title + '</div>' + '<div class="submitter">' + vid9submitter + '</div>' + '<div class="views">' + vid9views + '</div>' + '<div class="length">' + vid9length + '</div>' + '<div class="overlay"></div>';
    
    
    vid10title = vid10title.substring(0,37) + '...';
    document.getElementById('screenshot10').src = img10;
    document.getElementById('overlay10').innerHTML = '<div class="title">' + vid10title + '</div>' + '<div class="submitter">' + vid10submitter + '</div>' + '<div class="views">' + vid10views + '</div>' + '<div class="length">' + vid10length + '</div>' + '<div class="overlay"></div>';
    
    
    vid11title = vid11title.substring(0,37) + '...';
    document.getElementById('screenshot11').src = img11;
    document.getElementById('overlay11').innerHTML = '<div class="title">' + vid11title + '</div>' + '<div class="submitter">' + vid11submitter + '</div>' + '<div class="views">' + vid11views + '</div>' + '<div class="length">' + vid11length + '</div>' + '<div class="overlay"></div>';
    
    
    vid12title = vid12title.substring(0,37) + '...';
    document.getElementById('screenshot12').src = img12;
    document.getElementById('overlay12').innerHTML = '<div class="title">' + vid12title + '</div>' + '<div class="submitter">' + vid12submitter + '</div>' + '<div class="views">' + vid12views + '</div>' + '<div class="length">' + vid12length + '</div>' + '<div class="overlay"></div>';
    
    
    
    
    var mainvideo;
    function onYouTubePlayerAPIReady() {
        mainvideo = new YT.Player('mainvideo', {
            height: mainvideoheight,
            width: mainvideowidth,
            videoId: mainvideo,
            events: {
                'onStateChange': onPlayerStateChange
            }
        });
    }
    
    
    function onPlayerStateChange(event) {      
        if (event.data === 0) {
            document.getElementById('featuredcontainer').style.display = 'block';
        [COLOR=#00ff00]document.getElementById('featuredcontainer').style.height = mainvideoheight - 66 + 'px';[/COLOR]
    [COLOR=#00ff00]    document.getElementById('featuredcontainer').style.marginTop = '30px';[/COLOR]
        } 
        if (event.data === 1) {
            document.getElementById('featuredcontainer').style.display = 'none';
        [COLOR=#00ff00]document.getElementById('featuredcontainer').style.height = mainvideoheight - 36 + 'px';[/COLOR]
        }
        
    }
    
    
    function togglelayer(id) {
        var e = document.getElementById(id);
        if(e.style.display == 'block') {
            e.style.display = 'none';
        } else {
            e.style.display = 'block';
        }
    }
    
    
    function toggleoverlay(id) {
        var e = document.getElementById(id);
        if(e.style.display == 'block') {
            e.style.display = 'none';
        } else {
            e.style.display = 'block';
        }
    }
    
    
    function changevid(vidnumber) {
        if (vidnumber == 1) {
            document.getElementById('mainvideo').src = 'http://www.youtube.com/embed/' + newvid1;
        } 
        if (vidnumber == 2) {
            document.getElementById('mainvideo').src = 'http://www.youtube.com/embed/' + newvid2;
        }
        if (vidnumber == 3) {
            document.getElementById('mainvideo').src = 'http://www.youtube.com/embed/' + newvid3;
        }
        if (vidnumber == 4) {
            document.getElementById('mainvideo').src = 'http://www.youtube.com/embed/' + newvid4;
        }
        if (vidnumber == 5) {
            document.getElementById('mainvideo').src = 'http://www.youtube.com/embed/' + newvid5;
        }
        if (vidnumber == 6) {
            document.getElementById('mainvideo').src = 'http://www.youtube.com/embed/' + newvid6;
        }
        if (vidnumber == 7) {
            document.getElementById('mainvideo').src = 'http://www.youtube.com/embed/' + newvid7;
        }
        if (vidnumber == 8) {
            document.getElementById('mainvideo').src = 'http://www.youtube.com/embed/' + newvid8;
        }
        if (vidnumber == 9) {
            document.getElementById('mainvideo').src = 'http://www.youtube.com/embed/' + newvid9;
        }
        if (vidnumber == 10) {
            document.getElementById('mainvideo').src = 'http://www.youtube.com/embed/' + newvid10;
        }
        if (vidnumber == 11) {
            document.getElementById('mainvideo').src = 'http://www.youtube.com/embed/' + newvid11;
        }
        if (vidnumber == 12) {
            document.getElementById('mainvideo').src = 'http://www.youtube.com/embed/' + newvid12;
        }
        setTimeout(togglelayerdelay, 1000)
    }
    
    
    function togglelayerdelay() {
        mainvideo.playVideo();
        togglelayer('featuredcontainer');
    }
    
    </script>
    

    ENJOY!

    P.S. - I did not get around to "packaging" the above code so that you can simply save them as external CSS or JS files and link to them from within a page (therefore making the code nice and clean). If I get around to it, I will do that as well as comment out the code so you can make changes as you may or may not see fit.
     
    • Thanks Thanks x 27
    Last edited: Jun 7, 2013
  2. crazyflx

    crazyflx Elite Member

    Joined:
    Nov 9, 2009
    Messages:
    1,674
    Likes Received:
    4,825
    Location:
    http://CRAZYFLX.COM
    Home Page:
    Updated the OP with new code for a few things I fixed. Those things being:


    • When the video was over and you were looking at the forged suggested videos, you were unable to see or click the "replay" button. This is fixed.
    • When you clicked on one of the forged suggested videos, it was successfully changing to that video, but it was not autoplaying. This is fixed.

    Now the player with the forged suggested videos & stats is in every way (that I can find) a replica of a regularly embedded video.

    Enjoy!
     
    • Thanks Thanks x 1
  3. RushingWind

    RushingWind Elite Member

    Joined:
    Apr 6, 2013
    Messages:
    2,416
    Likes Received:
    3,333
    Just when a quality thread comes up, it disappears due to some other ones.
    Thanks for the great share OP. Now this method is what I call "BlackHat".
    Thanked and +repped :),
    RW.

    Oh and by the way, Congratulations on the 1K rep :D
     
    • Thanks Thanks x 1
  4. shailzrocks

    shailzrocks Jr. Executive VIP Jr. VIP Premium Member

    Joined:
    Jan 1, 2012
    Messages:
    1,113
    Likes Received:
    1,766
    Occupation:
    Dolphin Seller in a Black Market
    Location:
    No Man's Land
    Classic! This is amazing like your other threads.

    Thanks for this :)
     
    • Thanks Thanks x 1
  5. TheRealRazzy

    TheRealRazzy Jr. VIP Jr. VIP

    Joined:
    Mar 2, 2011
    Messages:
    1,464
    Likes Received:
    1,761
    Location:
    Chicago, IL
    Home Page:
    This is awesome.


    My first thoughts "This takes rick rolling to a whole new level" :D

    Nice share man :)


    Edit: read it again, maybe not so great for rick rolling lol.
     
    • Thanks Thanks x 1
    Last edited: Jun 6, 2013
  6. shirounlimited

    shirounlimited BANNED BANNED

    Joined:
    May 26, 2012
    Messages:
    165
    Likes Received:
    10
    I'm sorry if I will ask, but could you please tell me the benefits of 'editing' the suggested videos in the end of a YouTube video?
    I really don't get it. Thanks!
     
  7. raffael211

    raffael211 Jr. VIP Jr. VIP Premium Member

    Joined:
    Nov 8, 2011
    Messages:
    2,368
    Likes Received:
    133
    Location:
    BHW
    WOW,Awsome share man Happy for this :)
     
    • Thanks Thanks x 1
  8. SpookSEO

    SpookSEO Senior Member

    Joined:
    Dec 15, 2012
    Messages:
    848
    Likes Received:
    180
    Occupation:
    Linkbuilder
    Location:
    London, UK
    Home Page:
    This is amazing! A very useful thread everyone can benefit from. We are all aware how important videos are nowadays, as it's really obvious during search results. Many videos are already ranking top in Google. In YouTube, we all want people to stay in our page but that's impossible until now, that is. The thing about suggested videos is they will take people farther away from our site since they'll be clicking on the different videos suggested. Thanks a bunch!
     
    • Thanks Thanks x 1
  9. Asif WILSON Khan

    Asif WILSON Khan Executive VIP Premium Member

    Joined:
    Nov 10, 2012
    Messages:
    10,139
    Likes Received:
    28,607
    Gender:
    Male
    Occupation:
    Fun Lovin' Criminal
    Location:
    London
    Home Page:
    Excellent share, I was just thing yesterday if there could be away to do this. Sorted.
     
    • Thanks Thanks x 1
  10. Asif WILSON Khan

    Asif WILSON Khan Executive VIP Premium Member

    Joined:
    Nov 10, 2012
    Messages:
    10,139
    Likes Received:
    28,607
    Gender:
    Male
    Occupation:
    Fun Lovin' Criminal
    Location:
    London
    Home Page:
    Read the first post again. The benefits of doing this are clearly explained.
     
    • Thanks Thanks x 1
  11. amIdreaming

    amIdreaming Regular Member

    Joined:
    May 15, 2013
    Messages:
    233
    Likes Received:
    75
    just embed a playlist :p
     
  12. Paper-Boy

    Paper-Boy Elite Member

    Joined:
    Jun 17, 2009
    Messages:
    5,116
    Likes Received:
    1,821
    I miss your posts crazyflx. +8repped!
     
    • Thanks Thanks x 1
  13. crazyflx

    crazyflx Elite Member

    Joined:
    Nov 9, 2009
    Messages:
    1,674
    Likes Received:
    4,825
    Location:
    http://CRAZYFLX.COM
    Home Page:
    Thanks a lot bud, much appreciated (compliments & the congratz)

    Always happy to see another member saying nice things, thanks!

    Hahahaha, you know, it COULD be used for a great rick roll to be honest. Simply make every suggested video play a rick roll vid when it's clicked on, but have them each show as being a vid that is related to what they just watched. Great idea, lol.


    Please re-read the OP.

    Thanks a lot!

    Thanks a lot man!

    Thanks, makes me happy to hear/see that this will be made use of by another fellow BHW member.

    Thanks ;) ...and ditto.

    Not nearly the same thing. People see the "suggested videos" at the end of the video and assume that what they are looking at is a fact, since they are under the impression that the information they are seeing is coming from YouTube.

    What do you think would be more effective:

    A user watching your video on your site and then having another video of yours from your playlist auto-playing due to an emedded playlist OR
    A user watching your video on your site, and then when it's over seeing that "you" have uploaded 12 other videos all with 10,000,000 plus views or seeing that Oprah or JennaMarbles or Jesus uploaded a few of the suggested videos on your suggested videos page (even though they'll simply be a video you uploaded). In the second example, they'll not only watch more videos, but you instantly get more "social cred" because you can set it to show as whatever you want, and they are going to think what they are seeing is true.

    LOL, thanks a lot man, much appreciated.
     
    • Thanks Thanks x 2
  14. OMGWTFISTHIS

    OMGWTFISTHIS Power Member

    Joined:
    Sep 20, 2011
    Messages:
    575
    Likes Received:
    960
    Occupation:
    IM! :D
    Location:
    Florida
    I suppose you could also do this within the video itself, but it'd take a bit more time due to you having to add the screenshots yourself. You could:

    1. Have a screenshot of however many "suggested" videos towards the end, and let that screenshot play for about a minute or so.

    2. Have the same screenshot, but use their "pause" feature that they have, where the little timer comes up on the video that will pause the video and allow you to put an annotation note in between to reach your views.

    You would obviously have to make little annotations on each one of them for when you hover over it, but that wouldn't be hard thanks to this tool, which can be described here. I've used it many times, when my videos needed the same annotations across hundreds of other 'copy' videos. :p Works fantastic.
     
  15. crazyflx

    crazyflx Elite Member

    Joined:
    Nov 9, 2009
    Messages:
    1,674
    Likes Received:
    4,825
    Location:
    http://CRAZYFLX.COM
    Home Page:
    Using a "static image" at the end of the video, while clever, won't replicate the look and feel of the "suggested videos" screen (the effects you get when mousing over each of the videos for instance). In addition, linked annotations will require a page reload, completely destroying any belief the user had about them viewing the "suggested videos" screen...because when you click on a suggested video at the end of a youtube video, it does not require a page reload. The video just plays. The method in the OP also replicates that functionality as well.

    In addition, the person will still be able to clearly see the timer at the bottom of the video not having reached the end of the video.

    The purpose of the method in the OP, is to get the user to unequivocally "Know" that what they are seeing is the same thing they always see at the end of the video and to "Know" that the information is coming exclusively "from YouTube".
     
  16. crazyflx

    crazyflx Elite Member

    Joined:
    Nov 9, 2009
    Messages:
    1,674
    Likes Received:
    4,825
    Location:
    http://CRAZYFLX.COM
    Home Page:
    Turns out the sentence in red above, still wasn't quite correct. I noticed that at the end, when the video stops playing, the forged "suggested videos" that appeared, were covering up the top bar that drops down after a video is over.

    That top bar that drops down over the youtube video when it's over is what allows a user to "thumbs up" your video (if they're logged into their account) and also links back directly to the video on YouTube so they can clickthrough and leave a comment on your video, view your channel, etc. By accidentally covering that with the forged featured videos, you could potentially miss out on thumbs ups or people being able to "clickthrough" from the video you've embedded to the YouTube page and leaving a comment and so on.

    So, I have gone ahead and fixed this as well. Now when the video ends, you'll see you can see the top menu bar that drops down into view so you can click the info button, clickthrough to YouTube and/or leave a "thumbs up" (if logged into YouTube).

    I have edited the OP so the code in the OP reflects all the changes I've made to the code since I posted the OP. The most recent changes are color coded in the code snippets in the OP. The code being:


    • Red = modified
    • Green = added

    NOW I believe that it is a 100% working replica of what a video that has ended looks like...with the exception that you can control everything they see on that final screen of course ;)
     
    • Thanks Thanks x 1
    Last edited: Jun 7, 2013
  17. sn0rt

    sn0rt Elite Member

    Joined:
    Jun 12, 2012
    Messages:
    1,705
    Likes Received:
    3,502
    Occupation:
    "Most obstacles melt away when we make up our mind
    Location:
    "Knowing is not enough; we must apply. Willing is
    +sticky

    a job well done OP
     
    • Thanks Thanks x 1
  18. crazyflx

    crazyflx Elite Member

    Joined:
    Nov 9, 2009
    Messages:
    1,674
    Likes Received:
    4,825
    Location:
    http://CRAZYFLX.COM
    Home Page:
    Much appreciated :)

    In the near future I'm hoping to release a method to go along with it ;)
     
    • Thanks Thanks x 1
  19. francayma

    francayma Junior Member

    Joined:
    Jul 6, 2010
    Messages:
    127
    Likes Received:
    27
    Thanks for the share, there are so many possibilities with this.

    Thanks again.
     
  20. sn0rt

    sn0rt Elite Member

    Joined:
    Jun 12, 2012
    Messages:
    1,705
    Likes Received:
    3,502
    Occupation:
    "Most obstacles melt away when we make up our mind
    Location:
    "Knowing is not enough; we must apply. Willing is
    That would be outstanding. BHW needs more threads like these. Our upper members educating our lower members.
     
    • Thanks Thanks x 1