{"id":540,"date":"2020-11-20T22:05:29","date_gmt":"2020-11-20T22:05:29","guid":{"rendered":"https:\/\/www.raynamcginnis.com\/?post_type=project&#038;p=540"},"modified":"2020-11-20T22:12:20","modified_gmt":"2020-11-20T22:12:20","slug":"video-search","status":"publish","type":"project","link":"https:\/\/www.raynamcginnis.com\/project\/video-search\/","title":{"rendered":"Video Search | React Application using Youtube API"},"content":{"rendered":"\n[et_pb_section fb_built=&#8221;1&#8243; _builder_version=&#8221;3.27.2&#8243;][et_pb_row _builder_version=&#8221;3.27.2&#8243;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;3.27.2&#8243;][et_pb_text _builder_version=&#8221;4.6.5&#8243; hover_enabled=&#8221;0&#8243; sticky_enabled=&#8221;0&#8243;]<h1 style=\"text-align: center;\">Video Search | Youtube API Integration<\/h1>\n<p style=\"text-align: center;\"><span>This React.js video search application uses the Youtube API V3 to complete a video search based on the topic of choice, then displays the first five results while simultaniously loading the first video into the video player. From there, users can toggle between the five videos by clicking on the one they&#8217;d like to play or they can search for another topic.<\/span><\/p>\n[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=&#8221;3_4,1_4&#8243; _builder_version=&#8221;4.6.5&#8243; hover_enabled=&#8221;0&#8243; sticky_enabled=&#8221;0&#8243;][et_pb_column type=&#8221;3_4&#8243; _builder_version=&#8221;3.27.2&#8243;][et_pb_image src=&#8221;https:\/\/www.raynamcginnis.com\/wp-content\/uploads\/2020\/11\/react-video-search.png&#8221; show_in_lightbox=&#8221;on&#8221; _builder_version=&#8221;4.6.5&#8243; alt=&#8221;React Video Search using Youtube API&#8221; title_text=&#8221;react-video-search&#8221; hover_enabled=&#8221;0&#8243; sticky_enabled=&#8221;0&#8243;][\/et_pb_image][\/et_pb_column][et_pb_column type=&#8221;1_4&#8243; _builder_version=&#8221;3.27.2&#8243; custom_padding=&#8221;|||25px|false|false&#8221; border_width_left=&#8221;1px&#8221; border_color_left=&#8221;#000000&#8243;][et_pb_text _builder_version=&#8221;4.6.5&#8243; hover_enabled=&#8221;0&#8243; sticky_enabled=&#8221;0&#8243;]<p><strong>Link:<\/strong>\u00a0<a href=\"https:\/\/github.com\/raynamcginnis\/video-search\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/github.com\/raynamcginnis\/video-search<\/a><\/p>\n<p><strong>Technologies:<\/strong><\/p>\n<ul>\n<li>React.js<\/li>\n<li>JavaScript<\/li>\n<li>CSS<\/li>\n<\/ul>\n<p><strong>Integrations:<\/strong><\/p>\n<ul>\n<li>Youtube API V3<\/li>\n<li>Semantic UI<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n[\/et_pb_text][\/et_pb_column][\/et_pb_row][\/et_pb_section]\n","protected":false},"excerpt":{"rendered":"<p>Video Search | Youtube API Integration This React.js video search application uses the Youtube API V3 to complete a video search based on the topic of choice, then displays the first five results while simultaniously loading the first video into the video player. From there, users can toggle between the five videos by clicking on [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":541,"comment_status":"open","ping_status":"closed","template":"","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":""},"project_category":[17,7,12,15],"project_tag":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Video Search | React Application using Youtube API - Rayna McGinnis<\/title>\n<meta name=\"description\" content=\"This React.js video search application uses the Youtube API V3 to complete a video search based on the topic of choice, then displays...\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.raynamcginnis.com\/project\/video-search\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Video Search | React Application using Youtube API - Rayna McGinnis\" \/>\n<meta property=\"og:description\" content=\"This React.js video search application uses the Youtube API V3 to complete a video search based on the topic of choice, then displays...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.raynamcginnis.com\/project\/video-search\/\" \/>\n<meta property=\"og:site_name\" content=\"Rayna McGinnis\" \/>\n<meta property=\"article:modified_time\" content=\"2020-11-20T22:12:20+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.raynamcginnis.com\/wp-content\/uploads\/2020\/11\/react-video-search.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1270\" \/>\n\t<meta property=\"og:image:height\" content=\"813\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.raynamcginnis.com\/project\/video-search\/\",\"url\":\"https:\/\/www.raynamcginnis.com\/project\/video-search\/\",\"name\":\"Video Search | React Application using Youtube API - Rayna McGinnis\",\"isPartOf\":{\"@id\":\"https:\/\/www.raynamcginnis.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.raynamcginnis.com\/project\/video-search\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.raynamcginnis.com\/project\/video-search\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.raynamcginnis.com\/wp-content\/uploads\/2020\/11\/react-video-search.png\",\"datePublished\":\"2020-11-20T22:05:29+00:00\",\"dateModified\":\"2020-11-20T22:12:20+00:00\",\"description\":\"This React.js video search application uses the Youtube API V3 to complete a video search based on the topic of choice, then displays...\",\"breadcrumb\":{\"@id\":\"https:\/\/www.raynamcginnis.com\/project\/video-search\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.raynamcginnis.com\/project\/video-search\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.raynamcginnis.com\/project\/video-search\/#primaryimage\",\"url\":\"https:\/\/www.raynamcginnis.com\/wp-content\/uploads\/2020\/11\/react-video-search.png\",\"contentUrl\":\"https:\/\/www.raynamcginnis.com\/wp-content\/uploads\/2020\/11\/react-video-search.png\",\"width\":1270,\"height\":813,\"caption\":\"React Video Search using Youtube API\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.raynamcginnis.com\/project\/video-search\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.raynamcginnis.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Projects\",\"item\":\"https:\/\/www.raynamcginnis.com\/project\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Video Search | React Application using Youtube API\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.raynamcginnis.com\/#website\",\"url\":\"https:\/\/www.raynamcginnis.com\/\",\"name\":\"Rayna McGinnis\",\"description\":\"Front End Web Developer\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.raynamcginnis.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Video Search | React Application using Youtube API - Rayna McGinnis","description":"This React.js video search application uses the Youtube API V3 to complete a video search based on the topic of choice, then displays...","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.raynamcginnis.com\/project\/video-search\/","og_locale":"en_US","og_type":"article","og_title":"Video Search | React Application using Youtube API - Rayna McGinnis","og_description":"This React.js video search application uses the Youtube API V3 to complete a video search based on the topic of choice, then displays...","og_url":"https:\/\/www.raynamcginnis.com\/project\/video-search\/","og_site_name":"Rayna McGinnis","article_modified_time":"2020-11-20T22:12:20+00:00","og_image":[{"width":1270,"height":813,"url":"https:\/\/www.raynamcginnis.com\/wp-content\/uploads\/2020\/11\/react-video-search.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.raynamcginnis.com\/project\/video-search\/","url":"https:\/\/www.raynamcginnis.com\/project\/video-search\/","name":"Video Search | React Application using Youtube API - Rayna McGinnis","isPartOf":{"@id":"https:\/\/www.raynamcginnis.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.raynamcginnis.com\/project\/video-search\/#primaryimage"},"image":{"@id":"https:\/\/www.raynamcginnis.com\/project\/video-search\/#primaryimage"},"thumbnailUrl":"https:\/\/www.raynamcginnis.com\/wp-content\/uploads\/2020\/11\/react-video-search.png","datePublished":"2020-11-20T22:05:29+00:00","dateModified":"2020-11-20T22:12:20+00:00","description":"This React.js video search application uses the Youtube API V3 to complete a video search based on the topic of choice, then displays...","breadcrumb":{"@id":"https:\/\/www.raynamcginnis.com\/project\/video-search\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.raynamcginnis.com\/project\/video-search\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.raynamcginnis.com\/project\/video-search\/#primaryimage","url":"https:\/\/www.raynamcginnis.com\/wp-content\/uploads\/2020\/11\/react-video-search.png","contentUrl":"https:\/\/www.raynamcginnis.com\/wp-content\/uploads\/2020\/11\/react-video-search.png","width":1270,"height":813,"caption":"React Video Search using Youtube API"},{"@type":"BreadcrumbList","@id":"https:\/\/www.raynamcginnis.com\/project\/video-search\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.raynamcginnis.com\/"},{"@type":"ListItem","position":2,"name":"Projects","item":"https:\/\/www.raynamcginnis.com\/project\/"},{"@type":"ListItem","position":3,"name":"Video Search | React Application using Youtube API"}]},{"@type":"WebSite","@id":"https:\/\/www.raynamcginnis.com\/#website","url":"https:\/\/www.raynamcginnis.com\/","name":"Rayna McGinnis","description":"Front End Web Developer","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.raynamcginnis.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/www.raynamcginnis.com\/wp-json\/wp\/v2\/project\/540"}],"collection":[{"href":"https:\/\/www.raynamcginnis.com\/wp-json\/wp\/v2\/project"}],"about":[{"href":"https:\/\/www.raynamcginnis.com\/wp-json\/wp\/v2\/types\/project"}],"author":[{"embeddable":true,"href":"https:\/\/www.raynamcginnis.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.raynamcginnis.com\/wp-json\/wp\/v2\/comments?post=540"}],"version-history":[{"count":0,"href":"https:\/\/www.raynamcginnis.com\/wp-json\/wp\/v2\/project\/540\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.raynamcginnis.com\/wp-json\/wp\/v2\/media\/541"}],"wp:attachment":[{"href":"https:\/\/www.raynamcginnis.com\/wp-json\/wp\/v2\/media?parent=540"}],"wp:term":[{"taxonomy":"project_category","embeddable":true,"href":"https:\/\/www.raynamcginnis.com\/wp-json\/wp\/v2\/project_category?post=540"},{"taxonomy":"project_tag","embeddable":true,"href":"https:\/\/www.raynamcginnis.com\/wp-json\/wp\/v2\/project_tag?post=540"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}