{"id":25412155,"url":"https://github.com/terikon/framer-youtube-player","last_synced_at":"2025-10-31T05:31:09.308Z","repository":{"id":57241382,"uuid":"84730593","full_name":"terikon/framer-youtube-player","owner":"terikon","description":"A Framer module for displaying YouTube player","archived":false,"fork":false,"pushed_at":"2017-03-12T16:59:31.000Z","size":442,"stargazers_count":7,"open_issues_count":3,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-03T07:05:42.988Z","etag":null,"topics":["framer","framerjs","youtube","youtube-api","youtube-player"],"latest_commit_sha":null,"homepage":null,"language":"CoffeeScript","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/terikon.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":"2017-03-12T14:10:44.000Z","updated_at":"2022-11-02T01:15:44.000Z","dependencies_parsed_at":"2022-09-07T23:13:06.501Z","dependency_job_id":null,"html_url":"https://github.com/terikon/framer-youtube-player","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/terikon%2Fframer-youtube-player","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/terikon%2Fframer-youtube-player/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/terikon%2Fframer-youtube-player/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/terikon%2Fframer-youtube-player/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/terikon","download_url":"https://codeload.github.com/terikon/framer-youtube-player/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239120391,"owners_count":19585017,"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":["framer","framerjs","youtube","youtube-api","youtube-player"],"created_at":"2025-02-16T11:17:47.511Z","updated_at":"2025-10-31T05:31:09.011Z","avatar_url":"https://github.com/terikon.png","language":"CoffeeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# YouTube Player for Framer\n\n[Framer](https://framer.com) module for displaying YouTube videos.\nIt wraps [standard YouTube iFrame player](https://developers.google.com/youtube/iframe_api_reference), so the player itself can be manipulated in many interesting ways.\n\n\n![screenshot](https://terikon.github.io/framer-youtube-player/images/framer-screenshot-1.jpg)\n\n## Examples\n\nTODO: example\n\n## Installation\n\n- Create a new Framer project\n- Download YouTubePlayer.coffee and put it in the modules folder of the project\n- At the top of your code, write `{YouTubePlayer} = require 'YouTubePlayer'`\n\n## How to use\n\n```coffeescript\n{YouTubePlayer} = require 'YouTubePlayer'\n\nyoutube = new YouTubePlayer\n    video: \"9bZkp7q19f0\"\n    width: 400\n    height: 225\n    playerVars: # see https://developers.google.com/youtube/player_parameters\n        autoplay: 1\n        controls: 0\n```\n\nYou can also subscribe to different events:\n\n```coffeescript\nyoutube.on YouTubePlayer.Events.Loaded, (player, target) -\u003e\n\tprint 'YouTube Loaded'\n\tplayer.playVideo() # see https://developers.google.com/youtube/iframe_api_reference#Playback_controls\n\n```\n\n## API\n\n### new YouTubePlayer\n\nInstantiates a new instance of YouTubePlayer.\n\n#### Available options\n\n```coffeescript\nyoutube = new YouTubePlayer\n    # all the standard Layer options, like width, height, parent and blur\n    video: \u003cstring\u003e # YouTube video ID, like \"9bZkp7q19f0\"\n    playerVars: \u003cobject\u003e\n        autoplay: \u003cnumber\u003e (0 || 1)\n        controls: \u003cnumber\u003e (0 || 1)\n        # see https://developers.google.com/youtube/player_parameters for other options\n```\n\nAll the options are optional.\n\n### youtube.video\n\nCan set video for playing.\n\n### Events\n\nYouTubePlayer supports all the events that standard [iframe player supports](https://developers.google.com/youtube/iframe_api_reference#Events),\nas well as special Loaded event.\n\n#### YouTubePlayer.Events.Loaded\n\nRaises when video is loaded. At this point, you can start using [player API](https://developers.google.com/youtube/iframe_api_reference).\n\n```coffeescript\nyoutube.on YouTubePlayer.Events.Loaded, (player, targetComponent) -\u003e\n    player.seekTo(10)\n    player.playVideo()\n```\n\n#### YouTubePlayer.Events.Ready\n\nStandard [onReady event](https://developers.google.com/youtube/iframe_api_reference#Events) of iframe player.\n\n```coffeescript\nyoutube.on YouTubePlayer.Events.Ready, (event, targetComponent) -\u003e\n    player = event.target\n```\n\n#### YouTubePlayer.Events.StateChange\n\nStandard [onStateChange event](https://developers.google.com/youtube/iframe_api_reference#Events) of iframe player.\n\n```coffeescript\nyoutube.on YouTubePlayer.Events.StateChange, (event, targetComponent) -\u003e\n    player = event.target\n    state = event.data\n```\n\nState is one of following:\n- -1 (unstarted)\n- 0 (ended)\n- 1 (playing)\n- 2 (paused)\n- 3 (buffering)\n- 5 (video cued)\n\n#### YouTubePlayer.Events.PlaybackQualityChange\n\nStandard [onPlaybackQualityChange event](https://developers.google.com/youtube/iframe_api_reference#Events) of iframe player.\n\n```coffeescript\nyoutube.on YouTubePlayer.Events.PlaybackQualityChange, (event, targetComponent) -\u003e\n    player = event.target\n    quality = event.data\n```\n\nQuality is one of following strings:\n- small\n- medium\n- large\n- hd720\n- hd1080\n- highres\n\n#### YouTubePlayer.Events.PlaybackRateChange\n\nStandard [onPlaybackRateChange event](https://developers.google.com/youtube/iframe_api_reference#Events) of iframe player.\n\n```coffeescript\nyoutube.on YouTubePlayer.Events.PlaybackRateChange, (event, targetComponent) -\u003e\n    player = event.target\n    playbackRate = event.data\n```\n\n#### YouTubePlayer.Events.Error\n\nStandard [onError event](https://developers.google.com/youtube/iframe_api_reference#Events) of iframe player.\n\n```coffeescript\nyoutube.on YouTubePlayer.Events.Error, (event, targetComponent) -\u003e\n    player = event.target\n    errorCode = event.data\n```\n\n#### YouTubePlayer.Events.ApiChange\n\nStandard [onApiChange event](https://developers.google.com/youtube/iframe_api_reference#Events) of iframe player.\n\n```coffeescript\nyoutube.on YouTubePlayer.Events.ApiChange, (event, targetComponent) -\u003e\n    player = event.target\n    options = player.getOptions 'captions'\n```\n\n## Tips\n\nYou can set parent layer for YouTubePlayer, so it will be handy to move it around. Currently the Framer Studio's AutoCode feature does not work with custom modules.\n\n```coffeescript\nlayerA = new Layer # editable with AutoCode\n\tx: 200\n\ty: 300\n\twidth: 400\n\theight: 225\n\nyoutube = new YouTubePlayer\n\tparent: layerA\n\tvideo: \"9bZkp7q19f0\"\n\twidth: 400\n\theight: 225\n\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fterikon%2Fframer-youtube-player","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fterikon%2Fframer-youtube-player","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fterikon%2Fframer-youtube-player/lists"}