{"id":365451,"date":"2025-01-17T11:20:20","date_gmt":"2025-01-17T11:20:20","guid":{"rendered":"https:\/\/qmea25.qmea.fi\/project\/continuous-playback-media-site-for-podcasts-and-videos\/"},"modified":"2025-04-15T10:01:31","modified_gmt":"2025-04-15T10:01:31","slug":"media-platform-with-seamless-player-experience","status":"publish","type":"project","link":"https:\/\/qmea.fi\/en\/project\/media-platform-with-seamless-player-experience\/","title":{"rendered":"Media Platform with Seamless Player Experience"},"content":{"rendered":"<p>[et_pb_section fb_built=&#8221;1&#8243; _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;default&#8221; use_background_color_gradient=&#8221;on&#8221; background_color_gradient_type=&#8221;circular&#8221; background_color_gradient_direction_radial=&#8221;top left&#8221; background_color_gradient_stops=&#8221;#ff6422 0%|#243763 30%|#072130 61%|rgba(255,255,255,0) 100%&#8221; background_color_gradient_overlays_image=&#8221;on&#8221; background_image=&#8221;https:\/\/qmea25.qmea.fi\/wp-content\/uploads\/2025\/01\/KL-media2.jpg&#8221; parallax=&#8221;on&#8221; custom_margin=&#8221;-200px||||false|false&#8221; custom_margin_tablet=&#8221;-340px||||false|false&#8221; custom_margin_phone=&#8221;-340px||||false|false&#8221; custom_margin_last_edited=&#8221;on|phone&#8221; custom_padding=&#8221;|40px|60px|40px|false|true&#8221; custom_padding_tablet=&#8221;|40px||40px|false|true&#8221; background_last_edited=&#8221;on|phone&#8221; use_background_color_gradient_tablet=&#8221;on&#8221; background_color_gradient_stops_tablet=&#8221;gcid-630d6ec8-05c3-43c4-b0ea-e49e08006a01 0%|gcid-26f95f87-cf05-40f7-8426-e123a4acc224 33%|gcid-26f95f87-cf05-40f7-8426-e123a4acc224 57%|gcid-3a02e403-743b-4dc4-9aa7-0719f3b03b70 87%|rgba(255,255,255,0) 100%&#8221; locked=&#8221;off&#8221; global_colors_info=&#8221;{%22gcid-815ebb39-646b-4c9a-a3e8-ce9c4b7f9e47%22:%91%22background_color%22,%22background_color%22%93,%22gcid-3a02e403-743b-4dc4-9aa7-0719f3b03b70%22:%91%22background_color_gradient_stops%22,%22background_color_gradient_stops%22%93,%22gcid-64653083-5242-43fe-8dfb-3d72435526c0%22:%91%22background_color_gradient_stops%22%93,%22gcid-a2ad28b5-d28e-4d1e-9e4d-81a3653a5561%22:%91%22background_color_gradient_stops%22%93,%22gcid-630d6ec8-05c3-43c4-b0ea-e49e08006a01%22:%91%22background_color_gradient_stops%22%93,%22gcid-26f95f87-cf05-40f7-8426-e123a4acc224%22:%91%22background_color_gradient_stops%22%93,%22gcid-secondary-color%22:%91%22background_color_gradient_stops%22%93}&#8221;][et_pb_row _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;default&#8221; custom_margin=&#8221;200px||||false|false&#8221; custom_margin_tablet=&#8221;320px||||false|false&#8221; custom_margin_phone=&#8221;324px||||false|false&#8221; custom_margin_last_edited=&#8221;on|phone&#8221; custom_padding=&#8221;40px||40px||false|false&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.27.2&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_heading title=&#8221;Media platform with seamless player experience&#8221; _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;08c8fa62-8cb6-458a-a63b-8f171efc875d&#8221; title_text_align=&#8221;left&#8221;][\/et_pb_heading][et_pb_text _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;47214203-401a-4727-855d-1fa69532059e&#8221; header_text_align=&#8221;center&#8221; width_tablet=&#8221;auto&#8221; width_phone=&#8221;auto&#8221; width_last_edited=&#8221;on|phone&#8221; module_alignment=&#8221;center&#8221; global_colors_info=&#8221;{}&#8221;]<\/p>\n<p><span style=\"font-weight: 400;\">We implemented a media platform for the client, where the call continues uninterrupted while browsing the different contents and sub-pages of the website. The goal was to have a media site that plays both podcasts and videos and serves as a showcase for the association&#8217;s various media. This objective was achieved in good cooperation with the client.  <\/span><\/p>\n<p>[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=&#8221;1_3,1_3,1_3&#8243; disabled_on=&#8221;on|on|off&#8221; _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_column type=&#8221;1_3&#8243; _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_icon font_icon=&#8221;&#xf2ce;||fa||900&#8243; icon_color=&#8221;#24c1b7&#8243; _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][\/et_pb_icon][\/et_pb_column][et_pb_column type=&#8221;1_3&#8243; _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_icon font_icon=&#8221;&#x4c;||divi||400&#8243; icon_color=&#8221;#24c1b7&#8243; _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][\/et_pb_icon][\/et_pb_column][et_pb_column type=&#8221;1_3&#8243; _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_icon font_icon=&#8221;&#xe0a3;||divi||400&#8243; icon_color=&#8221;#24c1b7&#8243; _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][\/et_pb_icon][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=&#8221;1&#8243; _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_row _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_heading title=&#8221;A modern and flexible media platform built for Kansanl\u00e4hetys&#8221; _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;5e094f26-d72f-4798-ab97-f86dffe47d7b&#8221; global_colors_info=&#8221;{}&#8221;][\/et_pb_heading][et_pb_text _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;5b28c805-b678-4e20-9acc-b790c01137a3&#8243; global_colors_info=&#8221;{}&#8221;]<\/p>\n<p><span style=\"font-weight: 400;\">The aim is to have a media site that plays both podcasts and videos, acting as a showcase for the association&#8217;s various media. A media platform that provides a seamless experience for users. A media platform where playback continues uninterrupted while browsing content and sub-pages.  <\/span><\/p>\n<p>[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=&#8221;1_2,1_2&#8243; use_custom_gutter=&#8221;on&#8221; gutter_width=&#8221;2&#8243; make_equal=&#8221;on&#8221; _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_column type=&#8221;1_2&#8243; _builder_version=&#8221;4.27.2&#8243; _module_preset=&#8221;_initial&#8221; background_color=&#8221;#FFFFFF&#8221; custom_padding=&#8221;40px|40px|40px|40px|true|true&#8221; custom_padding_tablet=&#8221;30px|30px|30px|30px|true|true&#8221; custom_padding_phone=&#8221;20px|20px|20px|20px|true|true&#8221; custom_padding_last_edited=&#8221;on|tablet&#8221; border_radii=&#8221;on|30px|30px|30px|30px&#8221; box_shadow_style=&#8221;preset1&#8243; global_colors_info=&#8221;{}&#8221;][et_pb_heading title=&#8221;Starting point&#8221; _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;ab56bcac-03da-457b-9403-c654c9cf7bcd&#8221; global_colors_info=&#8221;{}&#8221;][\/et_pb_heading][et_pb_image src=&#8221;https:\/\/qmea25.qmea.fi\/wp-content\/uploads\/2024\/12\/aloitus@2x.png&#8221; alt=&#8221;start at&#8221; title_text=&#8221;aloitus@2x&#8221; _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;_initial&#8221; width=&#8221;80px&#8221; width_tablet=&#8221;40%&#8221; width_phone=&#8221;100px&#8221; width_last_edited=&#8221;on|phone&#8221; global_colors_info=&#8221;{}&#8221;][\/et_pb_image][et_pb_text _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]<\/p>\n<p><span data-metadata=\"&lt;encoded_tag_open \/&gt;!--(figmeta)eyJmaWxlS2V5IjoidVZzSzBOTGRFMUV6cEFUMFJ5cGtQYiIsInBhc3RlSUQiOjE1OTc1MzkxNTUsImRhdGFUeXBlIjoic2NlbmUifQo=(\/figmeta)--&lt;encoded_tag_closed \/&gt;\"><\/span>The client wanted a modern and user-friendly media site that would meet their diverse needs and provide a seamless user experience. They wanted a media player that would continuously play podcast or video, allowing podcasts, YouTube videos and local audio files (up to 6000) to play in the background as the user navigated through the different sections of the site. Other needs included a search feature, easy-to-use forms and a visually appealing and youthful look that would appeal to users and make consuming media content a pleasant experience.<\/p>\n<p>[\/et_pb_text][et_pb_button button_url=&#8221;#toteutukset&#8221; button_text=&#8221;Explore the outcome&#8221; _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;af808ffb-ef1b-4210-8ea7-042d009eca60&#8243; global_colors_info=&#8221;{}&#8221;][\/et_pb_button][\/et_pb_column][et_pb_column type=&#8221;1_2&#8243; _builder_version=&#8221;4.27.2&#8243; _module_preset=&#8221;_initial&#8221; background_color=&#8221;gcid-26f95f87-cf05-40f7-8426-e123a4acc224&#8243; custom_padding=&#8221;40px|40px|40px|40px|true|true&#8221; custom_padding_tablet=&#8221;30px|30px|30px|30px|true|true&#8221; custom_padding_phone=&#8221;20px|20px|20px|20px|true|true&#8221; custom_padding_last_edited=&#8221;on|tablet&#8221; border_radii=&#8221;on|30px|30px|30px|30px&#8221; global_colors_info=&#8221;{%22gcid-26f95f87-cf05-40f7-8426-e123a4acc224%22:%91%22background_color%22%93}&#8221;][et_pb_heading title=&#8221;Result&#8221; _builder_version=&#8221;4.27.2&#8243; _module_preset=&#8221;4470e2fa-18a6-4f7a-8b4f-d668cde3040a&#8221; global_colors_info=&#8221;{}&#8221;][\/et_pb_heading][et_pb_image src=&#8221;https:\/\/qmea25.qmea.fi\/wp-content\/uploads\/2024\/10\/q-man-raketissa.png&#8221; title_text=&#8221;q-man-raketissa&#8221; _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;_initial&#8221; width=&#8221;80px&#8221; width_tablet=&#8221;40%&#8221; width_phone=&#8221;90px&#8221; width_last_edited=&#8221;on|phone&#8221; global_colors_info=&#8221;{}&#8221;][\/et_pb_image][et_pb_text quote_border_color=&#8221;#FFFFFF&#8221; _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;_initial&#8221; text_font=&#8221;Inter||||||||&#8221; text_text_color=&#8221;#FFFFFF&#8221; link_font=&#8221;||||on||||&#8221; link_text_color=&#8221;#FFFFFF&#8221; ul_line_height=&#8221;1.8em&#8221; ol_line_height=&#8221;1.8em&#8221; quote_font=&#8221;Urbanist||||||||&#8221; quote_text_color=&#8221;#FFFFFF&#8221; quote_font_size=&#8221;24px&#8221; quote_line_height=&#8221;1.3em&#8221; header_font=&#8221;Urbanist||||||||&#8221; header_text_color=&#8221;#FFFFFF&#8221; header_font_size=&#8221;72px&#8221; header_line_height=&#8221;1.1em&#8221; header_2_font=&#8221;Urbanist||||||||&#8221; header_2_text_color=&#8221;#FFFFFF&#8221; header_2_font_size=&#8221;52px&#8221; header_2_line_height=&#8221;1.2em&#8221; header_3_font=&#8221;Urbanist||||||||&#8221; header_3_text_color=&#8221;#FFFFFF&#8221; header_3_font_size=&#8221;36px&#8221; header_3_line_height=&#8221;1.2em&#8221; header_4_font=&#8221;Urbanist||||||||&#8221; header_4_text_color=&#8221;#FFFFFF&#8221; header_4_font_size=&#8221;24px&#8221; header_4_line_height=&#8221;1.3em&#8221; header_5_font=&#8221;Urbanist||||||||&#8221; header_5_text_color=&#8221;#FFFFFF&#8221; header_5_font_size=&#8221;20px&#8221; header_5_line_height=&#8221;1.4em&#8221; header_6_font=&#8221;Urbanist||||||||&#8221; header_6_text_color=&#8221;#FFFFFF&#8221; header_6_font_size=&#8221;16px&#8221; header_6_line_height=&#8221;1.4em&#8221; text_font_size_tablet=&#8221;&#8221; text_font_size_phone=&#8221;14px&#8221; text_font_size_last_edited=&#8221;on|desktop&#8221; quote_font_size_tablet=&#8221;20px&#8221; quote_font_size_phone=&#8221;16px&#8221; quote_font_size_last_edited=&#8221;on|desktop&#8221; header_font_size_tablet=&#8221;40px&#8221; header_font_size_phone=&#8221;24px&#8221; header_font_size_last_edited=&#8221;on|desktop&#8221; header_2_font_size_tablet=&#8221;32px&#8221; header_2_font_size_phone=&#8221;20px&#8221; header_2_font_size_last_edited=&#8221;on|desktop&#8221; header_3_font_size_tablet=&#8221;24px&#8221; header_3_font_size_phone=&#8221;18px&#8221; header_3_font_size_last_edited=&#8221;on|desktop&#8221; header_4_font_size_tablet=&#8221;20px&#8221; header_4_font_size_phone=&#8221;16px&#8221; header_4_font_size_last_edited=&#8221;on|desktop&#8221; header_5_font_size_tablet=&#8221;18px&#8221; header_5_font_size_phone=&#8221;15px&#8221; header_5_font_size_last_edited=&#8221;on|desktop&#8221; header_6_font_size_tablet=&#8221;15px&#8221; header_6_font_size_phone=&#8221;14px&#8221; header_6_font_size_last_edited=&#8221;on|desktop&#8221; global_colors_info=&#8221;{}&#8221;]<\/p>\n<p><span style=\"font-weight: 400;\">The client got a modern and user-friendly media site. The site includes a continuous media player that allows users to enjoy podcasts, YouTube videos and thousands of local audio files as they navigate through the different sections of the site.   <\/span><\/p>\n<p><span style=\"font-weight: 400;\">In addition, a search function, clear forms and a fresh new look were created. The implementation allows for smooth content management and seamless access across all environments. <\/span><\/p>\n<p>[\/et_pb_text][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=&#8221;1&#8243; _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;default&#8221; background_color=&#8221;gcid-b6c4f12c-f25d-4f61-9fb1-6e96404634cd&#8221; global_colors_info=&#8221;{%22gcid-b6c4f12c-f25d-4f61-9fb1-6e96404634cd%22:%91%22background_color%22%93}&#8221;][et_pb_row _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_heading title=&#8221;Flexible and modern Web app networking solution&#8221; _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;5e094f26-d72f-4798-ab97-f86dffe47d7b&#8221; global_colors_info=&#8221;{}&#8221;][\/et_pb_heading][et_pb_text _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;default&#8221; custom_padding=&#8221;||24px||false|false&#8221; global_colors_info=&#8221;{}&#8221;]<\/p>\n<p><span style=\"font-weight: 400;\">The end result was implemented as a headless implementation using React-based code. We used WordPress as the content management system, which allowed for easy content maintenance. We also used modern technologies such as Next.js, Typescript, Tailwind and GraphQL to ensure the speed and flexibility of the site. To import content from external sources, such as YouTube and podcast services, we integrated API connectors into the system to ensure seamless functionality.   <\/span><\/p>\n<p>[\/et_pb_text][et_pb_heading title=&#8221;As a web app solution&#8221; _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;ab56bcac-03da-457b-9403-c654c9cf7bcd&#8221; custom_margin=&#8221;||14px||false|false&#8221; global_colors_info=&#8221;{}&#8221;][\/et_pb_heading][et_pb_text _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]<\/p>\n<p><span style=\"font-weight: 400;\">To achieve a seamless user experience while keeping the player &#8220;floating&#8221; when browsing the site, the core of the solution was a Single Page App, where we took advantage of the headless implementation.<\/span><\/p>\n<p>[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=&#8221;1_2,1_2&#8243; make_equal=&#8221;on&#8221; _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_column type=&#8221;1_2&#8243; _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;default&#8221; background_color=&#8221;#FFFFFF&#8221; custom_padding=&#8221;24px|24px|24px|24px|true|true&#8221; border_radii=&#8221;on|16px|16px|16px|16px&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_heading title=&#8221;Headless implementation in the background&#8221; _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;ab56bcac-03da-457b-9403-c654c9cf7bcd&#8221; title_font_size=&#8221;40px&#8221; global_colors_info=&#8221;{}&#8221;][\/et_pb_heading][et_pb_text _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]<\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Headless implementation<\/b><span style=\"font-weight: 400;\"> is a website or application structure where the front-end and the content management system (CMS, e.g. WordPress) operate as separate components.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">The website seen by the user (front-end) retrieves the necessary content from the back-end system through interfaces, but they are not tightly coupled as in traditional websites.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">This allows for greater flexibility, speed and the use of modern technologies to build the front-end.<\/span><\/li>\n<\/ul>\n<p>[\/et_pb_text][\/et_pb_column][et_pb_column type=&#8221;1_2&#8243; _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;default&#8221; background_color=&#8221;#FFFFFF&#8221; custom_padding=&#8221;24px|24px|24px|24px|true|true&#8221; border_radii=&#8221;on|16px|16px|16px|16px&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_heading title=&#8221;React-based code&#8221; _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;ab56bcac-03da-457b-9403-c654c9cf7bcd&#8221; title_font_size=&#8221;40px&#8221; global_colors_info=&#8221;{}&#8221;][\/et_pb_heading][et_pb_text _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]<\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>React<\/b><span style=\"font-weight: 400;\"> is a JavaScript library designed for creating modern and interactive user interfaces.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">With React, the front-end was implemented as a dynamic and powerful interface that can work independently and retrieve content from the back-end system.<\/span><\/li>\n<\/ul>\n<p>[\/et_pb_text][et_pb_image src=&#8221;https:\/\/qmea25.qmea.fi\/wp-content\/uploads\/2024\/11\/koodari.png&#8221; alt=&#8221;codari&#8221; title_text=&#8221;koodari&#8221; align_tablet=&#8221;left&#8221; align_phone=&#8221;left&#8221; align_last_edited=&#8221;on|phone&#8221; _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;default&#8221; width=&#8221;60%&#8221; width_tablet=&#8221;50%&#8221; width_phone=&#8221;55%&#8221; width_last_edited=&#8221;on|tablet&#8221; module_alignment=&#8221;center&#8221; global_colors_info=&#8221;{}&#8221;][\/et_pb_image][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=&#8221;1&#8243; admin_label=&#8221;Our Mission&#8221; _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;_initial&#8221; background_color=&#8221;gcid-3a02e403-743b-4dc4-9aa7-0719f3b03b70&#8243; use_background_color_gradient=&#8221;on&#8221; background_color_gradient_type=&#8221;circular&#8221; background_color_gradient_direction_radial=&#8221;bottom left&#8221; background_color_gradient_stops=&#8221;gcid-630d6ec8-05c3-43c4-b0ea-e49e08006a01 0%|rgba(130, 74, 71, 1) 26%|gcid-26f95f87-cf05-40f7-8426-e123a4acc224 57%|rgba(255,255,255,0) 100%&#8221; background_color_gradient_overlays_image=&#8221;on&#8221; background_image=&#8221;https:\/\/qmea25.qmea.fi\/wp-content\/uploads\/2025\/01\/KL-media2.jpg&#8221; parallax=&#8221;on&#8221; custom_margin=&#8221;||||false&#8221; custom_padding=&#8221;5vw||5vw||true|false&#8221; background_last_edited=&#8221;on|tablet&#8221; collapsed=&#8221;on&#8221; global_colors_info=&#8221;{%22gcid-64653083-5242-43fe-8dfb-3d72435526c0%22:%91%22background_color_gradient_stops%22%93,%22gcid-815ebb39-646b-4c9a-a3e8-ce9c4b7f9e47%22:%91%22background_color%22%93,%22gcid-a2ad28b5-d28e-4d1e-9e4d-81a3653a5561%22:%91%22background_color_gradient_stops%22%93,%22gcid-630d6ec8-05c3-43c4-b0ea-e49e08006a01%22:%91%22background_color_gradient_stops%22,%22background_color_gradient_stops%22%93,%22gcid-26f95f87-cf05-40f7-8426-e123a4acc224%22:%91%22background_color_gradient_stops%22%93,%22gcid-3a02e403-743b-4dc4-9aa7-0719f3b03b70%22:%91%22background_color_gradient_stops%22,%22background_color%22%93,%22gcid-secondary-color%22:%91%22background_color_gradient_stops%22%93,%22gcid-f31197b4-b95e-4bd9-be9a-5d91a3c5c19f%22:%91%22background_color_gradient_stops%22%93,%22gcid-468f3588-c202-4321-b581-ae0a56bbdcce%22:%91%22background_color_gradient_stops%22%93}&#8221; disabled_on=&#8221;on|on|on&#8221; disabled=&#8221;on&#8221;][et_pb_row _builder_version=&#8221;4.27.2&#8243; _module_preset=&#8221;default&#8221; max_width=&#8221;960px&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.25.1&#8243; _module_preset=&#8221;_initial&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_heading title=&#8221;KL Media&#8217;s thoughts on cooperation with Qmea.&#8221; _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;577c2d1a-c71b-4824-b66c-778be545ee68&#8243; global_colors_info=&#8221;{}&#8221;][\/et_pb_heading][et_pb_text _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;5b28c805-b678-4e20-9acc-b790c01137a3&#8243; text_text_color=&#8221;#FFFFFF&#8221; global_colors_info=&#8221;{}&#8221;]<\/p>\n<p style=\"text-align: center;\"><span>Sanna Myll\u00e4rinen, Company<\/span><\/p>\n<p>[\/et_pb_text][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=&#8221;1&#8243; specialty=&#8221;on&#8221; admin_label=&#8221;How You Can Help&#8221; module_id=&#8221;toteutukset&#8221; _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;default&#8221; inner_max_width=&#8221;980px&#8221; custom_padding=&#8221;||100px||false|false&#8221; collapsed=&#8221;on&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_column type=&#8221;1_2&#8243; _builder_version=&#8221;4.16&#8243; _module_preset=&#8221;_initial&#8221; custom_padding=&#8221;|||&#8221; global_colors_info=&#8221;{}&#8221; custom_padding__hover=&#8221;|||&#8221;][et_pb_heading title=&#8221;These are the services we provided&#8221; _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;5e094f26-d72f-4798-ab97-f86dffe47d7b&#8221; global_colors_info=&#8221;{}&#8221;][\/et_pb_heading][et_pb_blurb title=&#8221;Designing the look&#8221; use_icon=&#8221;on&#8221; font_icon=&#8221;&#x52;||divi||400&#8243; icon_color=&#8221;gcid-630d6ec8-05c3-43c4-b0ea-e49e08006a01&#8243; icon_placement=&#8221;left&#8221; image_icon_width=&#8221;32px&#8221; content_max_width=&#8221;100%&#8221; icon_placement_last_edited=&#8221;off|phone&#8221; image_icon_width_tablet=&#8221;32px&#8221; image_icon_width_last_edited=&#8221;off|phone&#8221; _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;_initial&#8221; header_font=&#8221;&#8211;et_global_heading_font|600|||||||&#8221; header_text_color=&#8221;gcid-heading-color&#8221; header_font_size=&#8221;24px&#8221; header_line_height=&#8221;1.3em&#8221; body_font=&#8221;&#8211;et_global_body_font||||||||&#8221; animation=&#8221;off&#8221; header_font_size_tablet=&#8221;20px&#8221; header_font_size_phone=&#8221;&#8221; header_font_size_last_edited=&#8221;on|phone&#8221; body_font_size_tablet=&#8221;15px&#8221; body_font_size_phone=&#8221;14px&#8221; body_font_size_last_edited=&#8221;on|desktop&#8221; global_colors_info=&#8221;{%22gcid-heading-color%22:%91%22header_text_color%22%93,%22gcid-630d6ec8-05c3-43c4-b0ea-e49e08006a01%22:%91%22icon_color%22%93}&#8221;]<\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">We designed and implemented a visual identity for the client that was in line with the target group and objectives of the service. We also designed the KL-media logo. <\/span><\/li>\n<\/ul>\n<p>[\/et_pb_blurb][et_pb_blurb title=&#8221;UX and UI design for the media platform&#8221; use_icon=&#8221;on&#8221; font_icon=&#8221;&#x52;||divi||400&#8243; icon_color=&#8221;gcid-630d6ec8-05c3-43c4-b0ea-e49e08006a01&#8243; icon_placement=&#8221;left&#8221; image_icon_width=&#8221;32px&#8221; content_max_width=&#8221;100%&#8221; icon_placement_last_edited=&#8221;off|phone&#8221; image_icon_width_tablet=&#8221;32px&#8221; image_icon_width_last_edited=&#8221;off|phone&#8221; _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;_initial&#8221; header_font=&#8221;&#8211;et_global_heading_font|600|||||||&#8221; header_text_color=&#8221;gcid-heading-color&#8221; header_font_size=&#8221;24px&#8221; header_line_height=&#8221;1.3em&#8221; body_font=&#8221;&#8211;et_global_body_font||||||||&#8221; animation=&#8221;off&#8221; header_font_size_tablet=&#8221;20px&#8221; header_font_size_phone=&#8221;20px&#8221; header_font_size_last_edited=&#8221;on|desktop&#8221; body_font_size_tablet=&#8221;15px&#8221; body_font_size_phone=&#8221;14px&#8221; body_font_size_last_edited=&#8221;on|desktop&#8221; global_colors_info=&#8221;{%22gcid-heading-color%22:%91%22header_text_color%22%93,%22gcid-630d6ec8-05c3-43c4-b0ea-e49e08006a01%22:%91%22icon_color%22%93}&#8221;]<\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\">We focused on a clear and user-friendly service, where each section is logically structured and easy to navigate.<\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\">The user interface was designed to support the media focus of the service, and the media viewer was seamlessly integrated into the interface.<\/li>\n<\/ul>\n<p>[\/et_pb_blurb][et_pb_blurb title=&#8221;Technical design and implementation&#8221; use_icon=&#8221;on&#8221; font_icon=&#8221;&#x52;||divi||400&#8243; icon_color=&#8221;gcid-630d6ec8-05c3-43c4-b0ea-e49e08006a01&#8243; icon_placement=&#8221;left&#8221; image_icon_width=&#8221;32px&#8221; content_max_width=&#8221;100%&#8221; icon_placement_last_edited=&#8221;off|phone&#8221; image_icon_width_tablet=&#8221;32px&#8221; image_icon_width_last_edited=&#8221;off|phone&#8221; _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;_initial&#8221; header_font=&#8221;&#8211;et_global_heading_font|600|||||||&#8221; header_text_color=&#8221;gcid-heading-color&#8221; header_font_size=&#8221;24px&#8221; header_line_height=&#8221;1.3em&#8221; body_font=&#8221;&#8211;et_global_body_font||||||||&#8221; animation=&#8221;off&#8221; header_font_size_tablet=&#8221;20px&#8221; header_font_size_phone=&#8221;20px&#8221; header_font_size_last_edited=&#8221;on|desktop&#8221; body_font_size_tablet=&#8221;15px&#8221; body_font_size_phone=&#8221;14px&#8221; body_font_size_last_edited=&#8221;on|desktop&#8221; global_colors_info=&#8221;{%22gcid-heading-color%22:%91%22header_text_color%22%93,%22gcid-630d6ec8-05c3-43c4-b0ea-e49e08006a01%22:%91%22icon_color%22%93}&#8221;]<\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">We carried out the technical design and implementation in a comprehensive and professional manner, focusing on a fast, flexible and user-friendly solution.  <\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">The site was built to support both smooth content management and excellent user experience, using modern technologies and external service integrations.<\/span><\/li>\n<\/ul>\n<p>[\/et_pb_blurb][et_pb_blurb title=&#8221;Project management&#8221; use_icon=&#8221;on&#8221; font_icon=&#8221;&#x52;||divi||400&#8243; icon_color=&#8221;gcid-630d6ec8-05c3-43c4-b0ea-e49e08006a01&#8243; icon_placement=&#8221;left&#8221; image_icon_width=&#8221;32px&#8221; content_max_width=&#8221;100%&#8221; icon_placement_last_edited=&#8221;off|phone&#8221; image_icon_width_tablet=&#8221;32px&#8221; image_icon_width_last_edited=&#8221;off|phone&#8221; _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;_initial&#8221; header_font=&#8221;&#8211;et_global_heading_font|600|||||||&#8221; header_text_color=&#8221;gcid-heading-color&#8221; header_font_size=&#8221;24px&#8221; header_line_height=&#8221;1.3em&#8221; body_font=&#8221;&#8211;et_global_body_font||||||||&#8221; animation=&#8221;off&#8221; header_font_size_tablet=&#8221;20px&#8221; header_font_size_phone=&#8221;20px&#8221; header_font_size_last_edited=&#8221;on|desktop&#8221; body_font_size_tablet=&#8221;15px&#8221; body_font_size_phone=&#8221;14px&#8221; body_font_size_last_edited=&#8221;on|desktop&#8221; global_colors_info=&#8221;{%22gcid-heading-color%22:%91%22header_text_color%22%93,%22gcid-630d6ec8-05c3-43c4-b0ea-e49e08006a01%22:%91%22icon_color%22%93}&#8221;]<\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">We also provided project management, which included careful preparation, close cooperation with the client and successful completion of the project on time.  <\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">From the outset, we ensured that the client&#8217;s needs, objectives and stakeholders were taken into account to ensure that the end result would best support the business.<\/span><\/li>\n<\/ul>\n<p>[\/et_pb_blurb][\/et_pb_column][et_pb_column type=&#8221;1_2&#8243; specialty_columns=&#8221;2&#8243; _builder_version=&#8221;4.16&#8243; _module_preset=&#8221;default&#8221; custom_padding=&#8221;|||&#8221; global_colors_info=&#8221;{}&#8221; custom_padding__hover=&#8221;|||&#8221;][et_pb_row_inner column_structure=&#8221;1_2,1_2&#8243; use_custom_gutter=&#8221;on&#8221; gutter_width=&#8221;2&#8243; _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_column_inner type=&#8221;1_2&#8243; saved_specialty_column_type=&#8221;1_2&#8243; _builder_version=&#8221;4.25.1&#8243; _module_preset=&#8221;_initial&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_image src=&#8221;https:\/\/qmea25.qmea.fi\/wp-content\/uploads\/2025\/01\/kl-media-pysty.jpg&#8221; alt=&#8221;KL-media&#8221; title_text=&#8221;kl-media-pysty&#8221; _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;_initial&#8221; custom_margin=&#8221;||||false|false&#8221; border_radii=&#8221;on|30px|30px|30px|30px&#8221; locked=&#8221;off&#8221; global_colors_info=&#8221;{}&#8221;][\/et_pb_image][et_pb_image src=&#8221;https:\/\/qmea25.qmea.fi\/wp-content\/uploads\/2024\/11\/ux-ui-suunnittelija.png&#8221; alt=&#8221;UX\/UI&#8221; title_text=&#8221;ux-ui-suunnittelija&#8221; _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;_initial&#8221; background_color=&#8221;#FFFFFF&#8221; custom_margin=&#8221;30px||||false|false&#8221; border_radii=&#8221;on|30px|30px|30px|30px&#8221; box_shadow_style=&#8221;preset1&#8243; locked=&#8221;off&#8221; global_colors_info=&#8221;{}&#8221;][\/et_pb_image][et_pb_image src=&#8221;https:\/\/qmea25.qmea.fi\/wp-content\/uploads\/2025\/01\/laptop-kl-media.jpg&#8221; alt=&#8221;Laptop KL-media&#8221; title_text=&#8221;laptop-kl-media&#8221; _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;_initial&#8221; custom_margin=&#8221;30px||||false|false&#8221; border_radii=&#8221;on|30px|30px|30px|30px&#8221; locked=&#8221;off&#8221; global_colors_info=&#8221;{}&#8221;][\/et_pb_image][\/et_pb_column_inner][et_pb_column_inner type=&#8221;1_2&#8243; saved_specialty_column_type=&#8221;1_2&#8243; _builder_version=&#8221;4.25.1&#8243; _module_preset=&#8221;_initial&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_image src=&#8221;https:\/\/qmea25.qmea.fi\/wp-content\/uploads\/2025\/01\/kl-soitin.jpg&#8221; alt=&#8221;Project management&#8221; title_text=&#8221;kl-soitin&#8221; _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;_initial&#8221; background_color=&#8221;#FFFFFF&#8221; custom_margin=&#8221;30px||||false|false&#8221; custom_margin_last_edited=&#8221;off|phone&#8221; custom_padding=&#8221;||||false|false&#8221; border_radii=&#8221;on|30px|30px|30px|30px&#8221; box_shadow_style=&#8221;preset1&#8243; global_colors_info=&#8221;{}&#8221;][\/et_pb_image][et_pb_image src=&#8221;https:\/\/qmea25.qmea.fi\/wp-content\/uploads\/2025\/01\/projari.jpg&#8221; alt=&#8221;Project management&#8221; title_text=&#8221;projari&#8221; _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;_initial&#8221; background_color=&#8221;#FFFFFF&#8221; custom_margin=&#8221;30px||||false|false&#8221; custom_margin_last_edited=&#8221;off|phone&#8221; custom_padding=&#8221;||||false|false&#8221; border_radii=&#8221;on|30px|30px|30px|30px&#8221; box_shadow_style=&#8221;preset1&#8243; global_colors_info=&#8221;{}&#8221;][\/et_pb_image][\/et_pb_column_inner][\/et_pb_row_inner][\/et_pb_column][\/et_pb_section][et_pb_section fb_built=&#8221;1&#8243; admin_label=&#8221;Call to Action&#8221; _builder_version=&#8221;4.27.2&#8243; _module_preset=&#8221;_initial&#8221; background_enable_color=&#8221;off&#8221; use_background_color_gradient=&#8221;on&#8221; background_color_gradient_stops=&#8221;rgba(255,255,255,0) 0%|#072130 100%&#8221; background_color_gradient_overlays_image=&#8221;on&#8221; background_image=&#8221;https:\/\/qmea25.qmea.fi\/wp-content\/uploads\/2024\/10\/avaruus.jpg&#8221; background_position=&#8221;center_right&#8221; background_horizontal_offset=&#8221;14%&#8221; custom_margin=&#8221;||||false&#8221; custom_padding=&#8221;80px||80px||true|false&#8221; locked=&#8221;off&#8221; collapsed=&#8221;on&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_row _builder_version=&#8221;4.25.2&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.25.1&#8243; _module_preset=&#8221;_initial&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_heading title=&#8221;Visible results through branded media content, targeted digital marketing and search engine optimisation.&#8221; _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;596d4132-99b6-462f-ac21-f41abfb4288c&#8221; title_text_align=&#8221;center&#8221; global_colors_info=&#8221;{}&#8221;][\/et_pb_heading][et_pb_button button_url=&#8221;@ET-DC@eyJkeW5hbWljIjp0cnVlLCJjb250ZW50IjoicG9zdF9saW5rX3VybF9wYWdlIiwic2V0dGluZ3MiOnsicG9zdF9pZCI6IjI0MCJ9fQ==@&#8221; button_text=&#8221;Contact us&#8221; button_alignment=&#8221;center&#8221; _builder_version=&#8221;4.27.4&#8243; _dynamic_attributes=&#8221;button_url&#8221; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][\/et_pb_button][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=&#8221;1&#8243; admin_label=&#8221;Blog&#8221; _builder_version=&#8221;4.25.1&#8243; _module_preset=&#8221;_initial&#8221; collapsed=&#8221;on&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_row _builder_version=&#8221;4.25.1&#8243; _module_preset=&#8221;default&#8221; locked=&#8221;off&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.25.1&#8243; _module_preset=&#8221;_initial&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_heading title=&#8221;See other projects&#8221; _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;5e094f26-d72f-4798-ab97-f86dffe47d7b&#8221; global_colors_info=&#8221;{}&#8221;][\/et_pb_heading][\/et_pb_column][\/et_pb_row][et_pb_row use_custom_gutter=&#8221;on&#8221; gutter_width=&#8221;2&#8243; _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.25.1&#8243; _module_preset=&#8221;_initial&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_blog fullwidth=&#8221;off&#8221; post_type=&#8221;project&#8221; posts_number=&#8221;3&#8243; show_author=&#8221;off&#8221; show_categories=&#8221;off&#8221; show_pagination=&#8221;off&#8221; _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;_initial&#8221; header_level=&#8221;h3&#8243; header_font=&#8221;&#8211;et_global_heading_font||||||||&#8221; header_font_size=&#8221;24px&#8221; header_line_height=&#8221;1.3em&#8221; body_font=&#8221;Inter||||||||&#8221; body_line_height=&#8221;1.8em&#8221; meta_font=&#8221;&#8211;et_global_heading_font||||||||&#8221; meta_text_color=&#8221;gcid-468f3588-c202-4321-b581-ae0a56bbdcce&#8221; meta_font_size=&#8221;16px&#8221; meta_line_height=&#8221;1.8em&#8221; read_more_font=&#8221;Inter|700||on|||||&#8221; read_more_text_color=&#8221;#0047ff&#8221; read_more_letter_spacing=&#8221;0.16em&#8221; read_more_line_height=&#8221;1.8em&#8221; pagination_font=&#8221;Inter|700||on|||||&#8221; pagination_text_color=&#8221;#0047ff&#8221; pagination_font_size=&#8221;14px&#8221; pagination_letter_spacing=&#8221;0.16em&#8221; pagination_line_height=&#8221;1.8em&#8221; header_font_size_tablet=&#8221;20px&#8221; header_font_size_phone=&#8221;16px&#8221; header_font_size_last_edited=&#8221;on|desktop&#8221; body_font_size_tablet=&#8221;15px&#8221; body_font_size_phone=&#8221;14px&#8221; body_font_size_last_edited=&#8221;on|desktop&#8221; meta_font_size_tablet=&#8221;15px&#8221; meta_font_size_phone=&#8221;14px&#8221; meta_font_size_last_edited=&#8221;on|desktop&#8221; border_radii=&#8221;on|30px|30px|30px|30px&#8221; border_color_all=&#8221;rgba(0,0,0,0.12)&#8221; global_colors_info=&#8221;{%22gcid-468f3588-c202-4321-b581-ae0a56bbdcce%22:%91%22meta_text_color%22%93}&#8221;][\/et_pb_blog][et_pb_button button_url=&#8221;@ET-DC@eyJkeW5hbWljIjp0cnVlLCJjb250ZW50IjoicG9zdF9saW5rX3VybF9wYWdlIiwic2V0dGluZ3MiOnsicG9zdF9pZCI6IjM2MzU2OCJ9fQ==@&#8221; button_text=&#8221;More works&#8221; button_alignment=&#8221;right&#8221; _builder_version=&#8221;4.27.4&#8243; _dynamic_attributes=&#8221;button_url&#8221; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][\/et_pb_button][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>We implemented a media platform for the client, where the call continues uninterrupted while browsing the different contents and sub-pages of the website. The goal was to have a media site that plays both podcasts and videos and serves as a showcase for the association&#8217;s various media. This objective was achieved in good cooperation with [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":365290,"comment_status":"open","ping_status":"closed","template":"","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"project_category":[8,40],"project_tag":[],"class_list":["post-365451","project","type-project","status-publish","has-post-thumbnail","hentry","project_category-kayttoliittymasuunnittelu","project_category-user-interface-design"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.9 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Media Platform with Seamless Player Experience | Qmea<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/qmea.fi\/en\/project\/media-platform-with-seamless-player-experience\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Media Platform with Seamless Player Experience | Qmea\" \/>\n<meta property=\"og:description\" content=\"We implemented a media platform for the client, where the call continues uninterrupted while browsing the different contents and sub-pages of the website. The goal was to have a media site that plays both podcasts and videos and serves as a showcase for the association&#039;s various media. This objective was achieved in good cooperation with [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/qmea.fi\/en\/project\/media-platform-with-seamless-player-experience\/\" \/>\n<meta property=\"og:site_name\" content=\"Qmea\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-15T10:01:31+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/qmea.fi\/wp-content\/uploads\/2025\/01\/KL-media.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"674\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\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=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/qmea.fi\\\/en\\\/project\\\/media-platform-with-seamless-player-experience\\\/\",\"url\":\"https:\\\/\\\/qmea.fi\\\/en\\\/project\\\/media-platform-with-seamless-player-experience\\\/\",\"name\":\"Media Platform with Seamless Player Experience | Qmea\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/qmea.fi\\\/en\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/qmea.fi\\\/en\\\/project\\\/media-platform-with-seamless-player-experience\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/qmea.fi\\\/en\\\/project\\\/media-platform-with-seamless-player-experience\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/qmea.fi\\\/wp-content\\\/uploads\\\/2025\\\/01\\\/KL-media.jpg\",\"datePublished\":\"2025-01-17T11:20:20+00:00\",\"dateModified\":\"2025-04-15T10:01:31+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/qmea.fi\\\/en\\\/project\\\/media-platform-with-seamless-player-experience\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/qmea.fi\\\/en\\\/project\\\/media-platform-with-seamless-player-experience\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/qmea.fi\\\/en\\\/project\\\/media-platform-with-seamless-player-experience\\\/#primaryimage\",\"url\":\"https:\\\/\\\/qmea.fi\\\/wp-content\\\/uploads\\\/2025\\\/01\\\/KL-media.jpg\",\"contentUrl\":\"https:\\\/\\\/qmea.fi\\\/wp-content\\\/uploads\\\/2025\\\/01\\\/KL-media.jpg\",\"width\":1200,\"height\":674},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/qmea.fi\\\/en\\\/project\\\/media-platform-with-seamless-player-experience\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/qmea.fi\\\/en\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Projects\",\"item\":\"https:\\\/\\\/qmea.fi\\\/en\\\/project\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Media Platform with Seamless Player Experience\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/qmea.fi\\\/en\\\/#website\",\"url\":\"https:\\\/\\\/qmea.fi\\\/en\\\/\",\"name\":\"Qmea\",\"description\":\"Intohimona el\u00e4mys!\",\"publisher\":{\"@id\":\"https:\\\/\\\/qmea.fi\\\/en\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/qmea.fi\\\/en\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/qmea.fi\\\/en\\\/#organization\",\"name\":\"Qmea Entertainment Oy\",\"url\":\"https:\\\/\\\/qmea.fi\\\/en\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/qmea.fi\\\/en\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/qmea.fi\\\/wp-content\\\/uploads\\\/2025\\\/04\\\/qmea-logo.png\",\"contentUrl\":\"https:\\\/\\\/qmea.fi\\\/wp-content\\\/uploads\\\/2025\\\/04\\\/qmea-logo.png\",\"width\":1080,\"height\":1080,\"caption\":\"Qmea Entertainment Oy\"},\"image\":{\"@id\":\"https:\\\/\\\/qmea.fi\\\/en\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Media Platform with Seamless Player Experience | Qmea","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:\/\/qmea.fi\/en\/project\/media-platform-with-seamless-player-experience\/","og_locale":"en_US","og_type":"article","og_title":"Media Platform with Seamless Player Experience | Qmea","og_description":"We implemented a media platform for the client, where the call continues uninterrupted while browsing the different contents and sub-pages of the website. The goal was to have a media site that plays both podcasts and videos and serves as a showcase for the association's various media. This objective was achieved in good cooperation with [&hellip;]","og_url":"https:\/\/qmea.fi\/en\/project\/media-platform-with-seamless-player-experience\/","og_site_name":"Qmea","article_modified_time":"2025-04-15T10:01:31+00:00","og_image":[{"width":1200,"height":674,"url":"https:\/\/qmea.fi\/wp-content\/uploads\/2025\/01\/KL-media.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/qmea.fi\/en\/project\/media-platform-with-seamless-player-experience\/","url":"https:\/\/qmea.fi\/en\/project\/media-platform-with-seamless-player-experience\/","name":"Media Platform with Seamless Player Experience | Qmea","isPartOf":{"@id":"https:\/\/qmea.fi\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/qmea.fi\/en\/project\/media-platform-with-seamless-player-experience\/#primaryimage"},"image":{"@id":"https:\/\/qmea.fi\/en\/project\/media-platform-with-seamless-player-experience\/#primaryimage"},"thumbnailUrl":"https:\/\/qmea.fi\/wp-content\/uploads\/2025\/01\/KL-media.jpg","datePublished":"2025-01-17T11:20:20+00:00","dateModified":"2025-04-15T10:01:31+00:00","breadcrumb":{"@id":"https:\/\/qmea.fi\/en\/project\/media-platform-with-seamless-player-experience\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/qmea.fi\/en\/project\/media-platform-with-seamless-player-experience\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/qmea.fi\/en\/project\/media-platform-with-seamless-player-experience\/#primaryimage","url":"https:\/\/qmea.fi\/wp-content\/uploads\/2025\/01\/KL-media.jpg","contentUrl":"https:\/\/qmea.fi\/wp-content\/uploads\/2025\/01\/KL-media.jpg","width":1200,"height":674},{"@type":"BreadcrumbList","@id":"https:\/\/qmea.fi\/en\/project\/media-platform-with-seamless-player-experience\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/qmea.fi\/en\/"},{"@type":"ListItem","position":2,"name":"Projects","item":"https:\/\/qmea.fi\/en\/project\/"},{"@type":"ListItem","position":3,"name":"Media Platform with Seamless Player Experience"}]},{"@type":"WebSite","@id":"https:\/\/qmea.fi\/en\/#website","url":"https:\/\/qmea.fi\/en\/","name":"Qmea","description":"Intohimona el\u00e4mys!","publisher":{"@id":"https:\/\/qmea.fi\/en\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/qmea.fi\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/qmea.fi\/en\/#organization","name":"Qmea Entertainment Oy","url":"https:\/\/qmea.fi\/en\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/qmea.fi\/en\/#\/schema\/logo\/image\/","url":"https:\/\/qmea.fi\/wp-content\/uploads\/2025\/04\/qmea-logo.png","contentUrl":"https:\/\/qmea.fi\/wp-content\/uploads\/2025\/04\/qmea-logo.png","width":1080,"height":1080,"caption":"Qmea Entertainment Oy"},"image":{"@id":"https:\/\/qmea.fi\/en\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/qmea.fi\/en\/wp-json\/wp\/v2\/project\/365451","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qmea.fi\/en\/wp-json\/wp\/v2\/project"}],"about":[{"href":"https:\/\/qmea.fi\/en\/wp-json\/wp\/v2\/types\/project"}],"author":[{"embeddable":true,"href":"https:\/\/qmea.fi\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/qmea.fi\/en\/wp-json\/wp\/v2\/comments?post=365451"}],"version-history":[{"count":8,"href":"https:\/\/qmea.fi\/en\/wp-json\/wp\/v2\/project\/365451\/revisions"}],"predecessor-version":[{"id":366226,"href":"https:\/\/qmea.fi\/en\/wp-json\/wp\/v2\/project\/365451\/revisions\/366226"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qmea.fi\/en\/wp-json\/wp\/v2\/media\/365290"}],"wp:attachment":[{"href":"https:\/\/qmea.fi\/en\/wp-json\/wp\/v2\/media?parent=365451"}],"wp:term":[{"taxonomy":"project_category","embeddable":true,"href":"https:\/\/qmea.fi\/en\/wp-json\/wp\/v2\/project_category?post=365451"},{"taxonomy":"project_tag","embeddable":true,"href":"https:\/\/qmea.fi\/en\/wp-json\/wp\/v2\/project_tag?post=365451"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}