{"id":22571352,"url":"https://github.com/designyourcode/youtube-api","last_synced_at":"2025-03-28T14:40:57.145Z","repository":{"id":30064092,"uuid":"33613533","full_name":"DesignyourCode/youtube-api","owner":"DesignyourCode","description":"Youtube Player API","archived":false,"fork":false,"pushed_at":"2016-07-14T13:09:38.000Z","size":98,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-02T15:12:07.041Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/DesignyourCode.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-04-08T14:55:29.000Z","updated_at":"2016-07-12T12:04:41.000Z","dependencies_parsed_at":"2022-08-28T18:05:36.923Z","dependency_job_id":null,"html_url":"https://github.com/DesignyourCode/youtube-api","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DesignyourCode%2Fyoutube-api","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DesignyourCode%2Fyoutube-api/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DesignyourCode%2Fyoutube-api/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DesignyourCode%2Fyoutube-api/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DesignyourCode","download_url":"https://codeload.github.com/DesignyourCode/youtube-api/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246049619,"owners_count":20715510,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-12-08T01:42:17.684Z","updated_at":"2025-03-28T14:40:57.128Z","avatar_url":"https://github.com/DesignyourCode.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# YouTube Tracking\n\nFancy tracking Youtube videos on your site? This script will allow you to tracking videos.\n\n###Requirements\n - Google Universal Analytics Script\n - jQuery 1.9+\n - This plugin\n\n## Usage:\n- Start by adding the required JavaScript files.\n- Use youtube-api.js for development and youtube-api.min.js for production.\n\n```\n\u003cscript type=\"text/javascript\" src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js\"\u003e\u003c/script\u003e\n\u003cscript type=\"text/javascript\" src=\"assets/lib/vendor/youtube-api.min.js\"\u003e\u003c/script\u003e\n```\n\n####You must include GA code on your site\n```\n\u003cscript\u003e\n  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){\n  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),\n  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)\n  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');\n\n  ga('create', 'UA-XXXXXXXX-X', 'auto');\n  ga('send', 'pageview');\n\u003c/script\u003e\n```\n\n- Then add the following (remember not to duplicate document.ready, if you already have this just add the plugin initialisation code):\n\n```\n$(document).ready(function(){\n\n  $('body').trackYoutube();\n\n});\n```\n\n- The plugin will loop through the page, find all the div with 'player-' and then build the Youtube video accordingly.\n\n```\n\u003cdiv id=\"player-\u003cYOUTUBE KEY\u003e\"\u003e\u003c/div\u003e\n\n\u003c!-- For example: --\u003e\n\u003cdiv id=\"player-ScMzIvxBSi4\"\u003e\u003c/div\u003e\n```\n\n## IMPORTANT\nIf a Youtube video hasn't had it's title entered properly when uploaded, you will need to define one yourself.\n\nTo do this add data-title attribute:\n\n```\n\u003cdiv id=\"player-ScMzIvxBSi4\" data-title=\"Title goes here\"\u003e\u003c/div\u003e\n```\nIt is good practice to test what GA data is being sent.\n\n\n## Options\n- You can control the size, by adding a relevant data tag:\n```\ndata-height=\"390\"\ndata-width=\"640\"\n```\nBy default it will be 853 wide by 480 high.\n\n- You can ignore the sizing and force the video to load responsively (keeping the aspect ratio).\n\nJust add the following CSS in your CSS file:\n```\n.video.keep-ratio {\n  position: relative;\n  padding-bottom: 56.25%;\n  height: 0;\n  overflow: hidden;\n}\n.video.keep-ratio iframe {     \n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n}\n```\n\nAnd add a parent div with a class of video and keep-ratio\n```\n\u003cdiv class=\"video keep-ratio\"\u003e\n\t\u003cdiv id=\"player-ScMzIvxBSi4\"\u003e\u003c/div\u003e\n\u003c/div\u003e\n```\n\n##Parameters\n- You can pass in player parameters as an object within the plugin.\n- Please visit [Youtube Embed Parameters](https://developers.google.com/youtube/player_parameters) for available options.\n\n```\n$('body').trackYoutube({\n  playerVars: {\n    'rel': 0,\n    'showinfo': 1\n  }\n});\n```\n\n##KissMetrics\nThis plugin supports KissMetrics tracking as well. However this is not a requirement and is switched off by default.\n\nTo enable this you can simply pass a parameter.\n\n```\n$(document).ready(function(){\n\n  $('body').trackYoutube({\n    'kissMetricsTracking': true\n  });\n\n});\n```\n\n##Demo\nView the [demo page](http://designyourcode.github.io/youtube-api/)\n\n##Installation via Bower\n\nbower install --save youtube-api-tracking\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdesignyourcode%2Fyoutube-api","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdesignyourcode%2Fyoutube-api","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdesignyourcode%2Fyoutube-api/lists"}