Welcome to Gaia! ::


IiI kim's Senpai

Profitable Saint

H O W - T O - C U S T O M I Z E - Y O U T U B E - M E D I A - P L A Y E R S

                  This is a CSS Style guide about media players.
                  I'm still working on improving/fixing this thread, feel free to leave a few words or some constructive suggestions! C:
                  *I might take a while to reply due to school circumstances*

                  Please <3? A popular status would make this guide stand out!


                  G U I D E - U P D A T E S

                                  __________________
                                  MAY 10 2013
                                  >Video can now repeat/replay
                                  >Guide easier to read (summarized, larger font)
                                  __________________
                                  AUGUST 25 2013
                                  >Various edits to content
                                  __________________
                                  APRIL 14 2014
                                  >Codes are working again on Chrome!
                                  __________________
                                  OCTOBER 14 2012
                                  >Tiny addition to the guide

IiI kim's Senpai

Profitable Saint

M U S T - R E A D

                  You need to know how to find and put the new YouTube URL into your profile.
                      Find a video you like on YouTube.
                      Right-click on the video and left-click Copy Video URL

                  Because of a change in YouTube, you now need to put this code in to make it work properly:
                  http://youtube.googleapis.com/v/VIDEO_ID_HERE?version=2

                  This is a VIDEO ID :
                      http://www.youtube.com/watch?v=9bZkp7q19f0
                      http://www.youtube.com/watch?v=--wK-cxx-1Soao
                      http://www.youtube.com/watch?feature=player_detailpage&v=QNRxHyZDU-Q&list=LLNwz8xphr5QgWOnDJpsbDvw
                      http://www.youtube.com/watch?list=PL9tY0BWXOZFvlFPYc0kyPqlcpWjWF6DVB&v=ekPBOVgGRSA&feature=player_detailpage

                  __________________
                  CLASSIC v1 PROFILE
                  Go to your Profile Preferences page and paste the YouTube URL into the box under the multimedia section.
                  __________________
                  CURRENT v2 PROFILE
                  Go to your profile
                  Click Edit My Profile Layout at the top right corner.
                  copy-paste the YouTube URL into your media panel
                  __________________

IiI kim's Senpai

Profitable Saint

Y O U T U B E - B O X

                  The YouTube box is the box that pops up when you click the "edit" button on the top right corner of a panel.

                  You can get HEX CODES HERE.

                  Okay, first we begin with the code we now have:
                  http://youtube.googleapis.com/v/xxxxxxxxxxx?version=2

                  Then you add the codes below to the end. (The order doesn't matter, you can add as many as you want.)
                      EXAMPLES
                      http://youtube.googleapis.com/v/xxxxxxxxxxx?version=2&loop=1
                      http://youtube.googleapis.com/v/xxxxxxxxxxx?version=2&autoplay=1&loop=1&color2=FFFFFF&color1=CCCCCC
                      http://youtube.googleapis.com/v/xxxxxxxxxxx?version=2&color1=CCCCCC&loop=1&color2=FFFFFF&autoplay=1

                  __________________
                  PLAYLIST

                  http://youtube.com/p/ooooooooooo?version=2
                  The playlist ID starts with PL, copy AFTER the PL

                      EXAMPLES

                      http://www.youtube.com/watch?v=HwSKkKrUzUk&list=PLFIuC2BOcnyZdTkePB9ghgw5ZdRxrUHkZ&feature=mh_lolz
                      http://www.youtube.com/playlist?list=PLFIuC2BOcnyZdTkePB9ghgw5ZdRxrUHkZ&feature=mh_lolz
                      http://www.youtube.com/playlist?list=PLFIuC2BOcnyZdTkePB9ghgw5ZdRxrUHkZ

                      &iframe width="560" height="315" src="//www.youtube.com/embed/videoseries?list=PLFIuC2BOcnyZdTkePB9ghgw5ZdRxrUHkZ" frameborder="0" allowfullscreen&&/iframe&


                  You can customize it with &autoplay=1 just like the regular video.
                  __________________
                  AUTOPLAY
                  &autoplay=1
                  __________________
                  REPEAT
                  &loop=1
                  __________________
                  BACKGROUND COLOR
                  &color2=FFFFFF
                  __________________
                  BORDER COLOR
                  &color1=CCCCCC
                  __________________
                  START VIDEO EARLY
                  &start=numberofseconds
                  __________________
                  END VIDEO EARLY
                  &end=numberofseconds

IiI kim's Senpai

Profitable Saint

C S S - B O X

                  The CSS box is the large box at the right side of this page under "Theme Override".
                  You can get to this page by going to My Gaia > Account > Profile Options.
                  (The CSS box is for BOTH Current/V2 and Classic/V1 profiles!)

                  You can change any numbers in orange.
                  You can get HEX CODES HERE *you must put a # before a hex code, example: #FFFFFF
                  __________________
                  WIDTH
                  .media_panel object, .media_panel embed { width: 60px;}
                  __________________
                  HEIGHT
                  .media_panel object, .media_panel embed { height: 25px;}
                  __________________
                  PANEL BACKGROUND
                  #multimedia, .media_panel{ background: color name or hex code here;}
                  __________________
                  PANEL HEADER
                  #multimedia h2, .media_panel h2
                  { background: BACKGROUND color name or hex code here;
                  color: TEXT color name or hex code here;}
                  __________________
                  TRANSPARENCY
                  .media_panel object, .media_panel embed {opacity: .5;}
                  __________________
                  ROUND
                  .media_panel object, .media_panel embed {border-radius: 20px;}

                  __________________
                  INVISIBLE
                  #multimedia, .media_panel{ position: absolute; left: -99999px;}

IiI kim's Senpai

Profitable Saint

L I N K S


                  User Image - Blocked by "Display Image" Settings. Click to show.
                  [url=www.gaiaonline.com/forum/t.83562303#][img]http://tinyurl.com/cv7xb7j[/img][/url]

                  Just quote me in the thread if you would like to affiliate! --All banners/links accepted! (Banner created by nosonia <3)


                  [GUIDE: CSS Properties] Style Sheet Solutions

Quick Reply

Submit
Manage Your Items
Other Stuff
Get GCash
Offers
Get Items
More Items
Where Everyone Hangs Out
Other Community Areas
Virtual Spaces
Fun Stuff
Gaia's Games
Mini-Games
Play with GCash
Play with Platinum