[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"github-stars":3,"marketplace-site-banners":110,"youtube":115},{"id":4,"node_id":5,"name":6,"full_name":7,"private":8,"owner":9,"html_url":27,"description":28,"fork":8,"url":29,"forks_url":30,"keys_url":31,"collaborators_url":32,"teams_url":33,"hooks_url":34,"issue_events_url":35,"events_url":36,"assignees_url":37,"branches_url":38,"tags_url":39,"blobs_url":40,"git_tags_url":41,"git_refs_url":42,"trees_url":43,"statuses_url":44,"languages_url":45,"stargazers_url":46,"contributors_url":47,"subscribers_url":48,"subscription_url":49,"commits_url":50,"git_commits_url":51,"comments_url":52,"issue_comment_url":53,"contents_url":54,"compare_url":55,"merges_url":56,"archive_url":57,"downloads_url":58,"issues_url":59,"pulls_url":60,"milestones_url":61,"notifications_url":62,"labels_url":63,"releases_url":64,"deployments_url":65,"created_at":66,"updated_at":67,"pushed_at":68,"git_url":69,"ssh_url":70,"clone_url":71,"svn_url":27,"homepage":72,"size":73,"stargazers_count":74,"watchers_count":74,"language":75,"has_issues":76,"has_projects":76,"has_downloads":8,"has_wiki":8,"has_pages":8,"has_discussions":76,"forks_count":77,"mirror_url":78,"archived":8,"disabled":8,"open_issues_count":79,"license":80,"allow_forking":76,"is_template":8,"web_commit_signoff_required":8,"has_pull_requests":76,"pull_request_creation_policy":85,"topics":86,"visibility":26,"forks":77,"open_issues":79,"watchers":74,"default_branch":106,"temp_clone_token":78,"custom_properties":107,"organization":108,"network_count":77,"subscribers_count":109},7122594,"MDEwOlJlcG9zaXRvcnk3MTIyNTk0","directus","directus\u002Fdirectus",false,{"login":6,"id":10,"node_id":11,"avatar_url":12,"gravatar_id":13,"url":14,"html_url":15,"followers_url":16,"following_url":17,"gists_url":18,"starred_url":19,"subscriptions_url":20,"organizations_url":21,"repos_url":22,"events_url":23,"received_events_url":24,"type":25,"user_view_type":26,"site_admin":8},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-23T13:53:13Z","git:\u002F\u002Fgithub.com\u002Fdirectus\u002Fdirectus.git","git@github.com:directus\u002Fdirectus.git","https:\u002F\u002Fgithub.com\u002Fdirectus\u002Fdirectus.git","https:\u002F\u002Fdirectus.com",454569,38624,"TypeScript",true,4981,null,352,{"key":81,"name":82,"spdx_id":83,"url":78,"node_id":84},"other","Other","NOASSERTION","MDc6TGljZW5zZTA=","all",[87,88,89,90,91,92,6,93,94,95,96,97,98,99,100,101,102,103,104,105],"api","app","cms","composable","data-visualization","database","graphql","headless-cms","javascript","mariadb","mssql","mysql","no-code","node","postgresql","sql","sqlite","typescript","vue","main",{},{"login":6,"id":10,"node_id":11,"avatar_url":12,"gravatar_id":13,"url":14,"html_url":15,"followers_url":16,"following_url":17,"gists_url":18,"starred_url":19,"subscriptions_url":20,"organizations_url":21,"repos_url":22,"events_url":23,"received_events_url":24,"type":25,"user_view_type":26,"site_admin":8},346,[111],{"id":112,"icon":78,"content":113,"link":114,"include_paths":78,"exclude_paths":78},"5cf2f5f6-aecf-4395-8c23-69de326fdf02","AI Assistant: Query Your Data, Update Content + More","https:\u002F\u002Fdirectus.com\u002Fai",{"extensions":116,"date_updated":119,"user_updated":120,"date_created":121,"user_created":122,"sort":78,"id":123,"metadata":78,"logo":124,"helpful_resources":125,"content":129,"website":130,"status":131,"category":132,"description":133,"slug":134,"name":135,"external_resources":136,"extensionDetails":137},[117,118],"@directus-labs\u002Fvideo-player-interface","@directus-labs\u002Fyoutube-embed-interface","2025-07-14T17:29:08.952Z","1a9ab95a-93bc-4908-af85-0d42bb6e6aa6","2025-07-11T14:29:17.289Z","1cd0a355-b103-477d-9375-61e88f3110f8","2e72b68e-6f3d-4c40-a8c4-ce541f420d3d","41974444-0db2-4009-856d-abde6b59fc49",[126],{"title":127,"url":128},"YouTube API Documentation","https:\u002F\u002Fdevelopers.google.com\u002Fyoutube","\u003Cp>YouTube is the world’s leading video-sharing platform, allowing people and organizations to upload, watch, and share a vast range of video content. With its official API, YouTube also gives developers the tools to integrate video functionality directly into their applications and workflows.\u003C\u002Fp>\n\u003Cp>In the context of Directus, YouTube integration makes it easy to embed and manage your video content right inside your data platform. By using extensions like the Video Player Interface and the YouTube Embed Interface, you can add YouTube videos to your content collections, display them in your dashboards, and organize all your media assets without leaving Directus. This integration is especially useful for teams managing media-rich content, as it keeps your video data and metadata structured and accessible alongside the rest of your project’s data.\u003C\u002Fp>\n\u003Cp>For anyone looking to bring YouTube’s video capabilities into their Directus-powered projects, these tools offer a straightforward way to manage, display, and curate video content within a single workspace.\u003C\u002Fp>","https:\u002F\u002Fwww.youtube.com","published","Media","Embed YouTube videos and manage video content with YouTube API integration","youtube","YouTube",[],[138,173],{"name":118,"description":139,"verified":8,"id":140,"readme":141,"type":142,"publisher":143,"last_updated":152,"host_version":153,"downloads":154,"total_downloads":155,"sandbox":76,"license":156,"versions":157,"formatted_name":169,"formatted_readme":170,"formatted_description":139,"featured_image":171,"images":172,"recent_downloads_7_days":155,"recent_downloads_30_days":155},"Search YouTube videos and generate embed codes","4de1736d-9bf7-4ed9-bd00-8968c72270dc","# YouTube Embed Interface\n\nAdd a field to your collection for searching and embedding YouTube videos. You can also copy embed codes from the drawer directly, so you can paste them elsewhere.\n\n![Screenshot of the YouTube Interface in action](https:\u002F\u002Fraw.githubusercontent.com\u002Fdirectus-labs\u002Fextensions\u002Fmain\u002Fpackages\u002Fyoutube-embed-interface\u002Fdocs\u002Fpreview.png)\n\n## Installation\n\nRefer to the [Official Guide](https:\u002F\u002Fdocs.directus.io\u002Fextensions\u002Finstalling-extensions.html) for details on installing the extension from the Marketplace or manually.\n\n## Usage\n\nSelect YouTube Embed as your interface when creating a new field in a collection.\n\nYou also need a **YouTube Data API V3** key from Google Cloud Console:\n\n1. In Google Cloud console, visit [APIs & Services](https:\u002F\u002Fconsole.cloud.google.com\u002Fapis)\n2. Select a project if needed and go to Library.\n3. Look for YouTube Data API V3 and click on Enable.\n4. Open Credentials and click on Create Credentials, select API key.\n5. Paste the API key into the interface settings.\n\nBy default this will allow you to search any public video on YouTube and create an embed. If you want to limit the selection to a single channel, you can specify a channel ID in the interface settings (note: this is not the same as your channel handle). \n\nYou can find your own channel ID by following [these instructions](https:\u002F\u002Fsupport.google.com\u002Fyoutube\u002Fanswer\u002F3250431?hl=en&sjid=5754630783709979667-EU). To find other channel's IDs you may have to use a third party tool.","interface",{"username":144,"verified":76,"id":145,"github_username":144,"github_name":146,"github_blog":147,"github_bio":148,"github_location":149,"github_company":150,"github_avatar_url":151},"ukmadlz","74ce2e77-733a-4e9a-b96d-93bf6264f622","Mike Elsmore","http:\u002F\u002Felsmore.me","(╯°□°）╯︵ TABLEFLIP","UK","@DigitalSpeed","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F804683?v=4","2025-01-30T20:58:46.815Z","^10.10.0",[],0,"MIT",[158],{"version":159,"package":140,"publisher":145,"type":142,"host_version":153,"publish_date":152,"verified":8,"id":160,"url_repository":78,"url_homepage":78,"url_bugs":78,"file_count":161,"unpacked_size":162,"bundled":163,"maintainers":164,"sandbox":76,"sandbox_requested_scopes":78,"license":156},"1.0.0","747fbe15-9f63-4081-9357-bf2bd661f35a",3,83436,[],[165,166,167,168],11907,11908,11909,11910,"YouTube Embed Interface","\u003Ch1>YouTube Embed Interface\u003C\u002Fh1>\n\u003Cp>Add a field to your collection for searching and embedding YouTube videos. You can also copy embed codes from the drawer directly, so you can paste them elsewhere.\u003C\u002Fp>\n\u003Cp>\u003Cimg src=\"https:\u002F\u002Fraw.githubusercontent.com\u002Fdirectus-labs\u002Fextensions\u002Fmain\u002Fpackages\u002Fyoutube-embed-interface\u002Fdocs\u002Fpreview.png\" alt=\"Screenshot of the YouTube Interface in action\">\u003C\u002Fp>\n\u003Ch2>Installation\u003C\u002Fh2>\n\u003Cp>Refer to the \u003Ca href=\"https:\u002F\u002Fdocs.directus.io\u002Fextensions\u002Finstalling-extensions.html\">Official Guide\u003C\u002Fa> for details on installing the extension from the Marketplace or manually.\u003C\u002Fp>\n\u003Ch2>Usage\u003C\u002Fh2>\n\u003Cp>Select YouTube Embed as your interface when creating a new field in a collection.\u003C\u002Fp>\n\u003Cp>You also need a \u003Cstrong>YouTube Data API V3\u003C\u002Fstrong> key from Google Cloud Console:\u003C\u002Fp>\n\u003Col>\n\u003Cli>In Google Cloud console, visit \u003Ca href=\"https:\u002F\u002Fconsole.cloud.google.com\u002Fapis\">APIs & Services\u003C\u002Fa>\u003C\u002Fli>\n\u003Cli>Select a project if needed and go to Library.\u003C\u002Fli>\n\u003Cli>Look for YouTube Data API V3 and click on Enable.\u003C\u002Fli>\n\u003Cli>Open Credentials and click on Create Credentials, select API key.\u003C\u002Fli>\n\u003Cli>Paste the API key into the interface settings.\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Cp>By default this will allow you to search any public video on YouTube and create an embed. If you want to limit the selection to a single channel, you can specify a channel ID in the interface settings (note: this is not the same as your channel handle).\u003C\u002Fp>\n\u003Cp>You can find your own channel ID by following \u003Ca href=\"https:\u002F\u002Fsupport.google.com\u002Fyoutube\u002Fanswer\u002F3250431?hl=en&sjid=5754630783709979667-EU\">these instructions\u003C\u002Fa>. To find other channel's IDs you may have to use a third party tool.\u003C\u002Fp>","https:\u002F\u002Fraw.githubusercontent.com\u002Fdirectus-labs\u002Fextensions\u002Fmain\u002Fpackages\u002Fyoutube-embed-interface\u002Fdocs\u002Fpreview.png",[171],{"name":117,"description":174,"verified":8,"id":175,"readme":176,"type":142,"publisher":177,"last_updated":180,"host_version":153,"downloads":181,"total_downloads":155,"sandbox":76,"license":156,"versions":182,"formatted_name":206,"formatted_readme":207,"formatted_description":174,"featured_image":208,"images":209,"repository_url":186,"recent_downloads_7_days":155,"recent_downloads_30_days":155},"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",{"username":178,"verified":8,"id":179,"github_username":78,"github_name":78,"github_blog":78,"github_bio":78,"github_location":78,"github_company":78,"github_avatar_url":78},"binaryben","a5eb8330-69ab-479e-93a4-38bb65eb24dd","2024-05-30T04:53:43.196Z",[],[183,196],{"version":159,"package":175,"publisher":179,"type":142,"host_version":153,"publish_date":184,"verified":8,"id":185,"url_repository":186,"url_homepage":187,"url_bugs":188,"file_count":161,"unpacked_size":189,"bundled":190,"maintainers":191,"sandbox":76,"sandbox_requested_scopes":78,"license":156},"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",158438,[],[192,193,194,195],10922,10923,10924,10925,{"version":197,"package":175,"publisher":179,"type":142,"host_version":153,"publish_date":180,"verified":8,"id":198,"url_repository":186,"url_homepage":187,"url_bugs":188,"file_count":161,"unpacked_size":199,"bundled":200,"maintainers":201,"sandbox":76,"sandbox_requested_scopes":78,"license":156},"1.0.1","b3e8260a-921d-4da9-9f0a-4e6f0c54dcdf",158439,[],[202,203,204,205],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",[208]]