[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"marketplace-site-banners":3,"github-stars":9,"@directus-labs\u002Fvideo-player-interface":115},[4],{"id":5,"icon":6,"content":7,"link":8,"include_paths":6,"exclude_paths":6},"5cf2f5f6-aecf-4395-8c23-69de326fdf02",null,"AI Assistant: Query Your Data, Update Content + More","https:\u002F\u002Fdirectus.com\u002Fai",{"id":10,"node_id":11,"name":12,"full_name":13,"private":14,"owner":15,"html_url":33,"description":34,"fork":14,"url":35,"forks_url":36,"keys_url":37,"collaborators_url":38,"teams_url":39,"hooks_url":40,"issue_events_url":41,"events_url":42,"assignees_url":43,"branches_url":44,"tags_url":45,"blobs_url":46,"git_tags_url":47,"git_refs_url":48,"trees_url":49,"statuses_url":50,"languages_url":51,"stargazers_url":52,"contributors_url":53,"subscribers_url":54,"subscription_url":55,"commits_url":56,"git_commits_url":57,"comments_url":58,"issue_comment_url":59,"contents_url":60,"compare_url":61,"merges_url":62,"archive_url":63,"downloads_url":64,"issues_url":65,"pulls_url":66,"milestones_url":67,"notifications_url":68,"labels_url":69,"releases_url":70,"deployments_url":71,"created_at":72,"updated_at":73,"pushed_at":74,"git_url":75,"ssh_url":76,"clone_url":77,"svn_url":33,"homepage":78,"size":79,"stargazers_count":80,"watchers_count":80,"language":81,"has_issues":82,"has_projects":82,"has_downloads":14,"has_wiki":14,"has_pages":14,"has_discussions":82,"forks_count":83,"mirror_url":6,"archived":14,"disabled":14,"open_issues_count":84,"license":85,"allow_forking":82,"is_template":14,"web_commit_signoff_required":14,"has_pull_requests":82,"pull_request_creation_policy":90,"topics":91,"visibility":32,"forks":83,"open_issues":84,"watchers":80,"default_branch":111,"temp_clone_token":6,"custom_properties":112,"organization":113,"network_count":83,"subscribers_count":114},7122594,"MDEwOlJlcG9zaXRvcnk3MTIyNTk0","directus","directus\u002Fdirectus",false,{"login":12,"id":16,"node_id":17,"avatar_url":18,"gravatar_id":19,"url":20,"html_url":21,"followers_url":22,"following_url":23,"gists_url":24,"starred_url":25,"subscriptions_url":26,"organizations_url":27,"repos_url":28,"events_url":29,"received_events_url":30,"type":31,"user_view_type":32,"site_admin":14},15967950,"MDEyOk9yZ2FuaXphdGlvbjE1OTY3OTUw","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F15967950?v=4","","https:\u002F\u002Fapi.github.com\u002Fusers\u002Fdirectus","https:\u002F\u002Fgithub.com\u002Fdirectus","https:\u002F\u002Fapi.github.com\u002Fusers\u002Fdirectus\u002Ffollowers","https:\u002F\u002Fapi.github.com\u002Fusers\u002Fdirectus\u002Ffollowing{\u002Fother_user}","https:\u002F\u002Fapi.github.com\u002Fusers\u002Fdirectus\u002Fgists{\u002Fgist_id}","https:\u002F\u002Fapi.github.com\u002Fusers\u002Fdirectus\u002Fstarred{\u002Fowner}{\u002Frepo}","https:\u002F\u002Fapi.github.com\u002Fusers\u002Fdirectus\u002Fsubscriptions","https:\u002F\u002Fapi.github.com\u002Fusers\u002Fdirectus\u002Forgs","https:\u002F\u002Fapi.github.com\u002Fusers\u002Fdirectus\u002Frepos","https:\u002F\u002Fapi.github.com\u002Fusers\u002Fdirectus\u002Fevents{\u002Fprivacy}","https:\u002F\u002Fapi.github.com\u002Fusers\u002Fdirectus\u002Freceived_events","Organization","public","https:\u002F\u002Fgithub.com\u002Fdirectus\u002Fdirectus","The flexible backend for all your projects 🐰 Turn your DB into a headless CMS, admin panels, or apps with a custom UI, instant APIs, auth & more.","https:\u002F\u002Fapi.github.com\u002Frepos\u002Fdirectus\u002Fdirectus","https:\u002F\u002Fapi.github.com\u002Frepos\u002Fdirectus\u002Fdirectus\u002Fforks","https:\u002F\u002Fapi.github.com\u002Frepos\u002Fdirectus\u002Fdirectus\u002Fkeys{\u002Fkey_id}","https:\u002F\u002Fapi.github.com\u002Frepos\u002Fdirectus\u002Fdirectus\u002Fcollaborators{\u002Fcollaborator}","https:\u002F\u002Fapi.github.com\u002Frepos\u002Fdirectus\u002Fdirectus\u002Fteams","https:\u002F\u002Fapi.github.com\u002Frepos\u002Fdirectus\u002Fdirectus\u002Fhooks","https:\u002F\u002Fapi.github.com\u002Frepos\u002Fdirectus\u002Fdirectus\u002Fissues\u002Fevents{\u002Fnumber}","https:\u002F\u002Fapi.github.com\u002Frepos\u002Fdirectus\u002Fdirectus\u002Fevents","https:\u002F\u002Fapi.github.com\u002Frepos\u002Fdirectus\u002Fdirectus\u002Fassignees{\u002Fuser}","https:\u002F\u002Fapi.github.com\u002Frepos\u002Fdirectus\u002Fdirectus\u002Fbranches{\u002Fbranch}","https:\u002F\u002Fapi.github.com\u002Frepos\u002Fdirectus\u002Fdirectus\u002Ftags","https:\u002F\u002Fapi.github.com\u002Frepos\u002Fdirectus\u002Fdirectus\u002Fgit\u002Fblobs{\u002Fsha}","https:\u002F\u002Fapi.github.com\u002Frepos\u002Fdirectus\u002Fdirectus\u002Fgit\u002Ftags{\u002Fsha}","https:\u002F\u002Fapi.github.com\u002Frepos\u002Fdirectus\u002Fdirectus\u002Fgit\u002Frefs{\u002Fsha}","https:\u002F\u002Fapi.github.com\u002Frepos\u002Fdirectus\u002Fdirectus\u002Fgit\u002Ftrees{\u002Fsha}","https:\u002F\u002Fapi.github.com\u002Frepos\u002Fdirectus\u002Fdirectus\u002Fstatuses\u002F{sha}","https:\u002F\u002Fapi.github.com\u002Frepos\u002Fdirectus\u002Fdirectus\u002Flanguages","https:\u002F\u002Fapi.github.com\u002Frepos\u002Fdirectus\u002Fdirectus\u002Fstargazers","https:\u002F\u002Fapi.github.com\u002Frepos\u002Fdirectus\u002Fdirectus\u002Fcontributors","https:\u002F\u002Fapi.github.com\u002Frepos\u002Fdirectus\u002Fdirectus\u002Fsubscribers","https:\u002F\u002Fapi.github.com\u002Frepos\u002Fdirectus\u002Fdirectus\u002Fsubscription","https:\u002F\u002Fapi.github.com\u002Frepos\u002Fdirectus\u002Fdirectus\u002Fcommits{\u002Fsha}","https:\u002F\u002Fapi.github.com\u002Frepos\u002Fdirectus\u002Fdirectus\u002Fgit\u002Fcommits{\u002Fsha}","https:\u002F\u002Fapi.github.com\u002Frepos\u002Fdirectus\u002Fdirectus\u002Fcomments{\u002Fnumber}","https:\u002F\u002Fapi.github.com\u002Frepos\u002Fdirectus\u002Fdirectus\u002Fissues\u002Fcomments{\u002Fnumber}","https:\u002F\u002Fapi.github.com\u002Frepos\u002Fdirectus\u002Fdirectus\u002Fcontents\u002F{+path}","https:\u002F\u002Fapi.github.com\u002Frepos\u002Fdirectus\u002Fdirectus\u002Fcompare\u002F{base}...{head}","https:\u002F\u002Fapi.github.com\u002Frepos\u002Fdirectus\u002Fdirectus\u002Fmerges","https:\u002F\u002Fapi.github.com\u002Frepos\u002Fdirectus\u002Fdirectus\u002F{archive_format}{\u002Fref}","https:\u002F\u002Fapi.github.com\u002Frepos\u002Fdirectus\u002Fdirectus\u002Fdownloads","https:\u002F\u002Fapi.github.com\u002Frepos\u002Fdirectus\u002Fdirectus\u002Fissues{\u002Fnumber}","https:\u002F\u002Fapi.github.com\u002Frepos\u002Fdirectus\u002Fdirectus\u002Fpulls{\u002Fnumber}","https:\u002F\u002Fapi.github.com\u002Frepos\u002Fdirectus\u002Fdirectus\u002Fmilestones{\u002Fnumber}","https:\u002F\u002Fapi.github.com\u002Frepos\u002Fdirectus\u002Fdirectus\u002Fnotifications{?since,all,participating}","https:\u002F\u002Fapi.github.com\u002Frepos\u002Fdirectus\u002Fdirectus\u002Flabels{\u002Fname}","https:\u002F\u002Fapi.github.com\u002Frepos\u002Fdirectus\u002Fdirectus\u002Freleases{\u002Fid}","https:\u002F\u002Fapi.github.com\u002Frepos\u002Fdirectus\u002Fdirectus\u002Fdeployments","2012-12-12T01:35:36Z","2026-10-23T13:25:16Z","2026-10-23T15:04:59Z","git:\u002F\u002Fgithub.com\u002Fdirectus\u002Fdirectus.git","git@github.com:directus\u002Fdirectus.git","https:\u002F\u002Fgithub.com\u002Fdirectus\u002Fdirectus.git","https:\u002F\u002Fdirectus.com",454849,38624,"TypeScript",true,4981,352,{"key":86,"name":87,"spdx_id":88,"url":6,"node_id":89},"other","Other","NOASSERTION","MDc6TGljZW5zZTA=","all",[92,93,94,95,96,97,12,98,99,100,101,102,103,104,105,106,107,108,109,110],"api","app","cms","composable","data-visualization","database","graphql","headless-cms","javascript","mariadb","mssql","mysql","no-code","node","postgresql","sql","sqlite","typescript","vue","main",{},{"login":12,"id":16,"node_id":17,"avatar_url":18,"gravatar_id":19,"url":20,"html_url":21,"followers_url":22,"following_url":23,"gists_url":24,"starred_url":25,"subscriptions_url":26,"organizations_url":27,"repos_url":28,"events_url":29,"received_events_url":30,"type":31,"user_view_type":32,"site_admin":14},346,{"name":116,"description":117,"verified":14,"id":118,"readme":119,"type":120,"publisher":121,"last_updated":124,"host_version":125,"downloads":126,"total_downloads":127,"sandbox":82,"license":128,"versions":129,"formatted_name":155,"formatted_readme":156,"formatted_description":117,"featured_image":157,"images":158,"repository_url":134,"recent_downloads_7_days":127,"recent_downloads_30_days":127},"@directus-labs\u002Fvideo-player-interface","An interface to select and display a video from YouTube, Vimeo or a local file from Directus","85c0edfc-2f15-411b-bd10-2058d7b06dad","# Video Player Interface\n\nSelect and display a video from YouTube, Vimeo or a local file from Directus within the item editor\n\n![The video interface, showing an open service drop-down with the options Directus, YouTube, and Vimeo, with YouTube selected, a video ID in the nearby text field, and a video player below the field.](https:\u002F\u002Fraw.githubusercontent.com\u002Fdirectus-labs\u002Fextensions\u002Fmain\u002Fpackages\u002Fvideo-player-interface\u002Fdocs\u002Fpreview.png)\n\n## Installation & Setup\n\nTo install the extension, take a look at the [Official Guide](https:\u002F\u002Fdocs.directus.io\u002Fextensions\u002Finstalling-extensions.html).\n\nTo make external video sources work, update your **CSP directives** as follows:\n\n```env\nCONTENT_SECURITY_POLICY_DIRECTIVES__FRAME_SRC=https:\u002F\u002Fwww.youtube-nocookie.com,https:\u002F\u002Fplayer.vimeo.com\nCONTENT_SECURITY_POLICY_DIRECTIVES__SCRIPT_SRC=array:'self', player.vimeo.com 'unsafe-eval', www.youtube.com 'unsafe-eval', www.youtube.com\u002Fiframe_api 'unsafe-eval'\nCONTENT_SECURITY_POLICY_DIRECTIVES__IMG_SRC=array:'self' data:, i.ytimg.com 'unsafe-eval'\nCONTENT_SECURITY_POLICY_DIRECTIVES__MEDIA_SRC=array:'self', cdn.plyr.io\n```\n\nOnce installed, go to your data model settings, create a new field or update an existing field of the type `json`, and select `Video` as the interface.\n\n## Usage\n\nLocate the video field on your item page and select a video source: Directus, YouTube or Vimeo. If you choose Directus, select an existing video from the file library. If you are using an external video service, paste in the Video ID. The video will now appear, and if it exists, you can play it directly from the item page.\n\n## Output\n\n```js\n\u002F\u002F Example output for YouTube videos\n{ service: 'youtube', id: 'iqBn7sBeJEc' }\n\n\u002F\u002F Example output for Vimeo videos\n{ service: 'vimeo', id: '37293500' }\n\n\u002F\u002F Example output for local videos from Directus\n{ service: 'directus', id: '09fe994b-01b5-4dea-9535-e7a14cfc0398' }\n```\n","interface",{"username":122,"verified":14,"id":123,"github_username":6,"github_name":6,"github_blog":6,"github_bio":6,"github_location":6,"github_company":6,"github_avatar_url":6},"binaryben","a5eb8330-69ab-479e-93a4-38bb65eb24dd","2024-05-30T04:53:43.196Z","^10.10.0",[],0,"MIT",[130,145],{"version":131,"package":118,"publisher":123,"type":120,"host_version":125,"publish_date":132,"verified":14,"id":133,"url_repository":134,"url_homepage":135,"url_bugs":136,"file_count":137,"unpacked_size":138,"bundled":139,"maintainers":140,"sandbox":82,"sandbox_requested_scopes":6,"license":128},"1.0.0","2024-05-29T07:58:23.568Z","6e2801e2-6657-4550-9149-983f4f15ae8a","https:\u002F\u002Fgithub.com\u002Fdirectus-labs\u002Fextensions.git","https:\u002F\u002Fgithub.com\u002Fdirectus-labs\u002Fextensions\u002Ftree\u002Fmain\u002Fpackages\u002Fvideo-player-interface#readme","https:\u002F\u002Fgithub.com\u002Fdirectus-labs\u002Fextensions\u002Fissues",3,158438,[],[141,142,143,144],10922,10923,10924,10925,{"version":146,"package":118,"publisher":123,"type":120,"host_version":125,"publish_date":124,"verified":14,"id":147,"url_repository":134,"url_homepage":135,"url_bugs":136,"file_count":137,"unpacked_size":148,"bundled":149,"maintainers":150,"sandbox":82,"sandbox_requested_scopes":6,"license":128},"1.0.1","b3e8260a-921d-4da9-9f0a-4e6f0c54dcdf",158439,[],[151,152,153,154],10941,10942,10943,10944,"Video Player Interface","\u003Ch1>Video Player Interface\u003C\u002Fh1>\n\u003Cp>Select and display a video from YouTube, Vimeo or a local file from Directus within the item editor\u003C\u002Fp>\n\u003Cp>\u003Cimg src=\"https:\u002F\u002Fraw.githubusercontent.com\u002Fdirectus-labs\u002Fextensions\u002Fmain\u002Fpackages\u002Fvideo-player-interface\u002Fdocs\u002Fpreview.png\" alt=\"The video interface, showing an open service drop-down with the options Directus, YouTube, and Vimeo, with YouTube selected, a video ID in the nearby text field, and a video player below the field.\">\u003C\u002Fp>\n\u003Ch2>Installation & Setup\u003C\u002Fh2>\n\u003Cp>To install the extension, take a look at the \u003Ca href=\"https:\u002F\u002Fdocs.directus.io\u002Fextensions\u002Finstalling-extensions.html\">Official Guide\u003C\u002Fa>.\u003C\u002Fp>\n\u003Cp>To make external video sources work, update your \u003Cstrong>CSP directives\u003C\u002Fstrong> as follows:\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-env\">CONTENT_SECURITY_POLICY_DIRECTIVES__FRAME_SRC=https:\u002F\u002Fwww.youtube-nocookie.com,https:\u002F\u002Fplayer.vimeo.com\nCONTENT_SECURITY_POLICY_DIRECTIVES__SCRIPT_SRC=array:'self', player.vimeo.com 'unsafe-eval', www.youtube.com 'unsafe-eval', www.youtube.com\u002Fiframe_api 'unsafe-eval'\nCONTENT_SECURITY_POLICY_DIRECTIVES__IMG_SRC=array:'self' data:, i.ytimg.com 'unsafe-eval'\nCONTENT_SECURITY_POLICY_DIRECTIVES__MEDIA_SRC=array:'self', cdn.plyr.io\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Once installed, go to your data model settings, create a new field or update an existing field of the type \u003Ccode>json\u003C\u002Fcode>, and select \u003Ccode>Video\u003C\u002Fcode> as the interface.\u003C\u002Fp>\n\u003Ch2>Usage\u003C\u002Fh2>\n\u003Cp>Locate the video field on your item page and select a video source: Directus, YouTube or Vimeo. If you choose Directus, select an existing video from the file library. If you are using an external video service, paste in the Video ID. The video will now appear, and if it exists, you can play it directly from the item page.\u003C\u002Fp>\n\u003Ch2>Output\u003C\u002Fh2>\n\u003Cpre>\u003Ccode class=\"language-js\">\u002F\u002F Example output for YouTube videos\n{ service: 'youtube', id: 'iqBn7sBeJEc' }\n\n\u002F\u002F Example output for Vimeo videos\n{ service: 'vimeo', id: '37293500' }\n\n\u002F\u002F Example output for local videos from Directus\n{ service: 'directus', id: '09fe994b-01b5-4dea-9535-e7a14cfc0398' }\n\u003C\u002Fcode>\u003C\u002Fpre>\n","https:\u002F\u002Fraw.githubusercontent.com\u002Fdirectus-labs\u002Fextensions\u002Fmain\u002Fpackages\u002Fvideo-player-interface\u002Fdocs\u002Fpreview.png",[157]]