{"title":"Organisms\/Media Header","parameters":{"componentSubtitle":"Media Header Component","docs":{"description":{"component":"The universal media header style on top of web pages."},"story":{"inline":true,"iframeHeight":400}}},"argTypes":{"media_type":{"name":"Media type","description":"Media entity type.","control":"select","defaultValue":"","options":{"' - none -'":"","Image":"image","'Local Video'":"video","'Remote Video'":"remote_video"}},"provider":{"name":"Provider","description":"Video provider (for remote video).","control":"select","defaultValue":"","options":{"'- empty -'":"","Youtube":"youtube","Vimeo":"vimeo"}},"media_header_utility_classes":{"name":"Utility Classes","description":"An array of utility classes that can be used to add extra Bootstrap utility classes or custom classes to this component.","control":"object","defaultValue":[]},"attributes":{"name":"Attributes","description":"HTML attributes for the media header.","control":"object","defaultValue":[]},"page_breadcrumbs":{"name":"Media Header page breadcrumbs","description":"System Page breadcrumbs.","defaultValue":"","control":"text"},"page_title":{"name":"Media Header page title","description":"title System page title","defaultValue":"","control":"text"},"background_media":{"name":"Background Media","description":"Background media (Image, local or remote videos).","defaultValue":"","control":"text"}},"stories":[{"name":"Media Header","args":{"media_type":"","provider":"","media_header_utility_classes":[],"page_breadcrumbs":"<nav data-component-id=\"vartheme_bs5:breadcrumb\"><ol class=\"breadcrumb bg-light py-2 px-3 my-2\"><li class=\"breadcrumb-item\"><a href=\"\/\">Home<\/a><\/li><\/ol><\/nav>","page_title":"Test Title","background_media":""},"parameters":{"server":{"id":"eyJwYXRoIjoidGhlbWVzXC9jb250cmliXC92YXJ0aGVtZV9iczVcL2NvbXBvbmVudHNcL29yZ2FuaXNtc1wvbWVkaWEtaGVhZGVyXC9tZWRpYS1oZWFkZXIuc3Rvcmllcy50d2lnIiwiaWQiOiJNZWRpYUhlYWRlciJ9"}}},{"name":"Media Header - Image","args":{"media_type":"image","provider":"","media_header_utility_classes":[],"page_breadcrumbs":"","page_title":"Test Title with Background Image","background_media":"<div class=\"field field--name-field-media-image field--type-image\"><img src=\"https:\/\/raw.githubusercontent.com\/Vardot\/varbase_media_demo\/10.0.0\/content\/file\/coworking-1.jpg\"><\/div>"},"parameters":{"server":{"id":"eyJwYXRoIjoidGhlbWVzXC9jb250cmliXC92YXJ0aGVtZV9iczVcL2NvbXBvbmVudHNcL29yZ2FuaXNtc1wvbWVkaWEtaGVhZGVyXC9tZWRpYS1oZWFkZXIuc3Rvcmllcy50d2lnIiwiaWQiOiJNZWRpYUhlYWRlckltYWdlIn0%3D"}}},{"name":"Media Header - Video","args":{"media_type":"video","provider":"","media_header_utility_classes":[],"page_breadcrumbs":"","page_title":"Test Title with Background Video","background_media":"<div class=\"varbase-video-player ratio ratio-16x9\"><video autoplay=\"autoplay\" loop=\"loop\" muted=\"muted\" width=\"1600\" height=\"900\"><source src=\"https:\/\/github.com\/Vardot\/varbase_media_demo\/raw\/10.0.0\/content\/file\/business-meeting.mp4\" type=\"video\/mp4\"><\/video><\/div>"},"parameters":{"server":{"id":"eyJwYXRoIjoidGhlbWVzXC9jb250cmliXC92YXJ0aGVtZV9iczVcL2NvbXBvbmVudHNcL29yZ2FuaXNtc1wvbWVkaWEtaGVhZGVyXC9tZWRpYS1oZWFkZXIuc3Rvcmllcy50d2lnIiwiaWQiOiJNZWRpYUhlYWRlclZpZGVvIn0%3D"}}},{"name":"Media Header - Youtube","args":{"media_type":"remote_video","provider":"youtube","media_header_utility_classes":[],"page_breadcrumbs":"","page_title":"Test Title with Youtube Video","background_media":"<div class=\"varbase-video-player ratio ratio-16x9\"><iframe src=\"https:\/\/youtube.com\/embed\/bTqVqk7FSmY?autoplay=1&mute=1\" frameborder=\"0\" allowtransparency=\"\" width=\"1600\" height=\"900\" loading=\"lazy\" ><\/iframe><\/div>"},"parameters":{"server":{"id":"eyJwYXRoIjoidGhlbWVzXC9jb250cmliXC92YXJ0aGVtZV9iczVcL2NvbXBvbmVudHNcL29yZ2FuaXNtc1wvbWVkaWEtaGVhZGVyXC9tZWRpYS1oZWFkZXIuc3Rvcmllcy50d2lnIiwiaWQiOiJNZWRpYUhlYWRlcllvdXR1YmUifQ%3D%3D"}}},{"name":"Media Header - Vimeo","args":{"media_type":"remote_video","provider":"vimeo","media_header_utility_classes":[],"page_breadcrumbs":"","page_title":"Test Title with Vimeo Video","background_media":"<div class=\"varbase-video-player ratio ratio-16x9\"><iframe src=\"https:\/\/player.vimeo.com\/video\/76979871?autoplay=1&background=1\" frameborder=\"0\" allow=\"autoplay; encrypted-media\" allowfullscreen=\"\" allowtransparency=\"\" width=\"1600\" height=\"900\" loading=\"lazy\"><\/iframe><\/div>"},"parameters":{"server":{"id":"eyJwYXRoIjoidGhlbWVzXC9jb250cmliXC92YXJ0aGVtZV9iczVcL2NvbXBvbmVudHNcL29yZ2FuaXNtc1wvbWVkaWEtaGVhZGVyXC9tZWRpYS1oZWFkZXIuc3Rvcmllcy50d2lnIiwiaWQiOiJNZWRpYUhlYWRlclZpbWVvIn0%3D"}}}]}