Youtube playlist
Posted December 2nd 2011, 8:51pm
Introduction: This mod will create a youtube playlist. It's very convenient for those forums which have many Youtube videos. The main advantage is this mod using regular bbcode to create the youtube playlist.

Pros:
  • Work fine on most browsers.
  • Only load the first video, so it won't increase your forum loading speed.
  • Suitable for all versions (phpBB2, phpBB3, punBB, Invision).
Cons:
  • I haven't figured out any cons yet :shock: .

Demo:
[spoiler]Image

Live demo here (This is my official site, introduce it to your friends. I will share more mods if it get more views :) )[/spoiler]

Instruction:
  1. ACP - Display - Pictures and Colors - Colors - CSS Stylesheet:
            .bgytblist{
    background-color: #000000;
    border: 1px solid black;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 2px 2px 3px #999999;
    left: 5px;
    margin: 10px 0 15px 5px;
    min-height: 40px;
    overflow: visible;
    padding: 10px;
    position: relative;
    top: 6px;
    width: 640px;
    }
    .imgytblist img:hover{
    cursor:pointer;
    opacity: 0.7;
    }
  2. ACP - Modules - HTML & JAVASCRIPT - Javascript codes management - Placement : In all pages
    var CopyrightNotice='Youtube playlist. Copyright ©  by Fmvi. All Rights Reserved. Use, modification, and/or distribution of this script is not allowed without direct permission from Zero (robot_body2018@yahoo.com). This entire copyright notice must remain in the original, copied, or modified script';
    $(function() {
    $("table.youtube").each(function() {
    $(this).before('<div align="center"><div class="bgytblist showytbFMvi"></div><div class="bgytblist" style="height: 90px"><div class="scrollFMviRight" style="height:90px; width:20px; display: inline-block;cursor:pointer; float: left ;"><img border="0" style="width: 20px; height: 90px;" src="http://i48.servimg.com/u/f48/16/58/89/73/left10.png"></div><div class="listytbFMvi" style="margin-left: 5px; text-align: left; overflow: hidden; position: relative; height: 90px; width: 590px; display: inline-block; float:left"><span class="imgytblist" style="position: absolute; top: 0px; padding: 0; margin: 0; left: 0px"></span></div><div class="scrollFMviLeft" style="height:90px; width:20px; display: inline-block;cursor:pointer; float: right"><img border="0" style="width: 20px; height: 90px;" src="http://i48.servimg.com/u/f48/16/58/89/73/right10.png"></div></div></div>');
    $(this).find("a[href^='http'][href*='youtu'][href*='be']").appendTo($(this).prev().find("span.imgytblist"));
    $(this).prev().find(".imgytblist a[href^='http'][href*='youtu'][href*='be']").each(function() {
    $(this).replaceWith('<img width="120px" height="90px" src="http://img.youtube.com/vi/' + $(this).attr("href").slice($(this).attr("href").indexOf("v=") + 2, $(this).attr("href").indexOf("v=") + 13) + '/1.jpg">')
    });
    var a = $(this).prev().find(".imgytblist img"), b = $(this).prev().find(".imgytblist"), g = $(this).prev().find(".listytbFMvi"), c = $(this).prev().find(".scrollFMviLeft"), d = $(this).prev().find(".scrollFMviRight"), f = $(this).prev().find(".showytbFMvi");
    $(this).prev().find(".imgytblist img:first").css("opacity", "0.25");
    var h = $(this).prev().find(".imgytblist img:first").attr("src").slice(26, 37);
    f.html('<iframe width="640" height="360" src="http://www.youtube.com/embed/' + h + '?version=3&rel=0&wmode=transparent" frameborder="0" allowfullscreen></iframe>');
    a.click(function() {
    var a = $(this).attr("src").slice(26, 37);
    f.html('<iframe width="640" height="360" src="http://www.youtube.com/embed/' + a + '?version=3&rel=0&wmode=transparent&autoplay=1" frameborder="0" allowfullscreen></iframe>');
    $(this).css("opacity", "0.25")
    });
    a = 120 * a.length + 2;
    if(a > g.css("width").match("[0-9]+")) {
    b.width(a);
    var e = b.css("left").match("[0-9]+"), i = -a + 590;
    c.hover(function() {
    c = setInterval(function() {
    0 < e ? clearInterval(c) : b.css("left", e++)
    }, 10)
    }, function() {
    clearInterval(c)
    });
    d.hover(function() {
    d = setInterval(function() {
    e === i ? clearInterval(d) : b.css("left", e--)
    }, 10)
    }, function() {
    clearInterval(d)
    })
    }
    $(this).remove()
    })
    });

How to use it:
[table class=youtube][tr][td]
Youtube video url 1
Youtube video url 2
Youtuve video url 3
[/td][/tr][/table]


Note:
  1. If you want to add the button for it. Please take a look at this script (I use it for my download button which is in the editor :) )
    $(function(){$("<button class=\"button2\" onclick=\"bbfontstyle('[download]','[/download]');return false\"><img src=\"http://i48.servimg.com/u/f48/16/28/30/49/downlo10.gif\" height=\"16px\"/></button> <img src=\"http://illiweb.com/fa/wysiwyg/separator.png\" style=\"vertical-align: middle;\"> ").insertBefore("span#text_edit input.button2[value='Others']")})
  2. Sr ioncube, I'm not like Dion who explain things for every examples. Btw, I am not a good teacher if you want the explaination, you may ask Dion, maybe he can give you some explaintions about it (I hope so :hhead: )
φ
Posts: 209
Joined: September 10th 2011, 11:00pm
Location: SC, USA
Likes Given: 8
Likes Received: 8
Youtube playlist
Posted December 2nd 2011, 8:56pm
<3
φ
Posts: 237
Joined: October 29th 2011, 11:00pm
Location: england, united kingdom, stoke on trent
Likes Given: 20
Likes Received: 4
Youtube playlist
Posted December 2nd 2011, 10:07pm
@Ryan: U like it huh ?
φ
Posts: 209
Joined: September 10th 2011, 11:00pm
Location: SC, USA
Likes Given: 8
Likes Received: 8
Youtube playlist
Posted December 2nd 2011, 11:44pm
???
bbfontstyle('[download]','[/download]')

=>
bbfontstyle('[table class=youtube][tr][td]','[/td][/tr][/table]')
φ
Posts:
Avatar
Guest
Youtube playlist
Posted December 3rd 2011, 2:22am
another great tutorial :P ; I will try to understand it Image
φ
Posts: 163
Joined: August 5th 2011, 11:00pm
Location: Pakistan
Likes Given: 34
Likes Received: 3

Who is online

Users browsing this forum: No registered users and 0 guests