{"id":1381,"date":"2025-04-12T01:03:21","date_gmt":"2025-04-12T01:03:21","guid":{"rendered":"https:\/\/www.cathyzhang.ca\/sample\/?page_id=1381"},"modified":"2025-05-10T20:10:18","modified_gmt":"2025-05-10T20:10:18","slug":"post-video","status":"publish","type":"page","link":"https:\/\/cathyzhang.ca\/sample\/post-video\/","title":{"rendered":"Post Video"},"content":{"rendered":"\n<p class=\"has-text-align-center\"><strong>Shortcode:   cz_six_video<\/strong><\/p>\n\n\n<div class=\"video-gallery-container\">\r\n    <div class=\"main-video\">\r\n                <video id=\"main-player\" controls autoplay muted loop>\r\n            <source src=\"https:\/\/www.cathyzhang.ca\/sample\/wp-content\/uploads\/2025\/04\/sea.mp4\" type=\"video\/mp4\">\r\n            Your browser does not support the video tag.\r\n        <\/video>\r\n        <h2 id=\"main-title\">Sea<\/h2>\r\n    <\/div>\r\n\r\n    <div class=\"video-list\">\r\n        <div class=\"desktop-list\">\r\n                        <div class=\"video-item active\" data-url=\"https:\/\/www.cathyzhang.ca\/sample\/wp-content\/uploads\/2025\/04\/sea.mp4\" data-title=\"Sea\">\r\n                <div class=\"thumbnail-container\">\r\n                    <img decoding=\"async\" src=\"https:\/\/cathyzhang.ca\/sample\/wp-content\/uploads\/2025\/04\/lavenders-6482952_1280-300x200.jpg\" alt=\"Sea\">\r\n                    <div class=\"play-icon active\">\u25b6<\/div>\r\n                    <div class=\"video-title\">Sea<\/div>\r\n                <\/div>\r\n            <\/div>\r\n                        <div class=\"video-item \" data-url=\"https:\/\/www.cathyzhang.ca\/sample\/wp-content\/uploads\/2025\/04\/island.mp4\" data-title=\"Island Travel\">\r\n                <div class=\"thumbnail-container\">\r\n                    <img decoding=\"async\" src=\"https:\/\/cathyzhang.ca\/sample\/wp-content\/uploads\/2025\/04\/grape-hyacinths-8578115_1280-300x200.jpg\" alt=\"Island Travel\">\r\n                    <div class=\"play-icon \">\u25b6<\/div>\r\n                    <div class=\"video-title\">Island Travel<\/div>\r\n                <\/div>\r\n            <\/div>\r\n                        <div class=\"video-item \" data-url=\"https:\/\/www.cathyzhang.ca\/sample\/wp-content\/uploads\/2025\/04\/marriage.mp4\" data-title=\"Cost of Marriage\">\r\n                <div class=\"thumbnail-container\">\r\n                    <img decoding=\"async\" src=\"https:\/\/cathyzhang.ca\/sample\/wp-content\/uploads\/2025\/04\/autumn-7504819_1280-300x200.jpg\" alt=\"Cost of Marriage\">\r\n                    <div class=\"play-icon \">\u25b6<\/div>\r\n                    <div class=\"video-title\">Cost of Marriage<\/div>\r\n                <\/div>\r\n            <\/div>\r\n                        <div class=\"video-item \" data-url=\"https:\/\/www.cathyzhang.ca\/sample\/wp-content\/uploads\/2025\/04\/prague.mp4\" data-title=\"Prague\">\r\n                <div class=\"thumbnail-container\">\r\n                    <img decoding=\"async\" src=\"https:\/\/cathyzhang.ca\/sample\/wp-content\/uploads\/2025\/04\/flowers-7954719_1280-300x200.jpg\" alt=\"Prague\">\r\n                    <div class=\"play-icon \">\u25b6<\/div>\r\n                    <div class=\"video-title\">Prague<\/div>\r\n                <\/div>\r\n            <\/div>\r\n                        <div class=\"video-item \" data-url=\"https:\/\/www.cathyzhang.ca\/sample\/wp-content\/uploads\/2025\/04\/tea.mp4\" data-title=\"How to Brew Flower Tea\">\r\n                <div class=\"thumbnail-container\">\r\n                    <img decoding=\"async\" src=\"https:\/\/cathyzhang.ca\/sample\/wp-content\/uploads\/2025\/04\/honey-bee-8284082_1280-300x200.jpg\" alt=\"How to Brew Flower Tea\">\r\n                    <div class=\"play-icon \">\u25b6<\/div>\r\n                    <div class=\"video-title\">How to Brew Flower Tea<\/div>\r\n                <\/div>\r\n            <\/div>\r\n                        <div class=\"video-item \" data-url=\"https:\/\/www.cathyzhang.ca\/sample\/wp-content\/uploads\/2025\/04\/rink.mp4\" data-title=\"The World&#039;s Largest Skating Rink\">\r\n                <div class=\"thumbnail-container\">\r\n                    <img decoding=\"async\" src=\"https:\/\/cathyzhang.ca\/sample\/wp-content\/uploads\/2025\/04\/water-lily-1535906_1280-300x198.jpg\" alt=\"The World&#039;s Largest Skating Rink\">\r\n                    <div class=\"play-icon \">\u25b6<\/div>\r\n                    <div class=\"video-title\">The World&#039;s Largest Skating Rink<\/div>\r\n                <\/div>\r\n            <\/div>\r\n                    <\/div>\r\n\r\n        <!-- Mobile Dropdown -->\r\n        <div class=\"mobile-select-container\">\r\n            <select class=\"mobile-dropdown\">\r\n                                <option value=\"https:\/\/www.cathyzhang.ca\/sample\/wp-content\/uploads\/2025\/04\/sea.mp4\" data-title=\"Sea\" data-thumbnail=\"https:\/\/cathyzhang.ca\/sample\/wp-content\/uploads\/2025\/04\/lavenders-6482952_1280-150x150.jpg\" selected>\r\n                    Sea                <\/option>\r\n                                <option value=\"https:\/\/www.cathyzhang.ca\/sample\/wp-content\/uploads\/2025\/04\/island.mp4\" data-title=\"Island Travel\" data-thumbnail=\"https:\/\/cathyzhang.ca\/sample\/wp-content\/uploads\/2025\/04\/grape-hyacinths-8578115_1280-150x150.jpg\" >\r\n                    Island Travel                <\/option>\r\n                                <option value=\"https:\/\/www.cathyzhang.ca\/sample\/wp-content\/uploads\/2025\/04\/marriage.mp4\" data-title=\"Cost of Marriage\" data-thumbnail=\"https:\/\/cathyzhang.ca\/sample\/wp-content\/uploads\/2025\/04\/autumn-7504819_1280-150x150.jpg\" >\r\n                    Cost of Marriage                <\/option>\r\n                                <option value=\"https:\/\/www.cathyzhang.ca\/sample\/wp-content\/uploads\/2025\/04\/prague.mp4\" data-title=\"Prague\" data-thumbnail=\"https:\/\/cathyzhang.ca\/sample\/wp-content\/uploads\/2025\/04\/flowers-7954719_1280-150x150.jpg\" >\r\n                    Prague                <\/option>\r\n                                <option value=\"https:\/\/www.cathyzhang.ca\/sample\/wp-content\/uploads\/2025\/04\/tea.mp4\" data-title=\"How to Brew Flower Tea\" data-thumbnail=\"https:\/\/cathyzhang.ca\/sample\/wp-content\/uploads\/2025\/04\/honey-bee-8284082_1280-150x150.jpg\" >\r\n                    How to Brew Flower Tea                <\/option>\r\n                                <option value=\"https:\/\/www.cathyzhang.ca\/sample\/wp-content\/uploads\/2025\/04\/rink.mp4\" data-title=\"The World&#039;s Largest Skating Rink\" data-thumbnail=\"https:\/\/cathyzhang.ca\/sample\/wp-content\/uploads\/2025\/04\/water-lily-1535906_1280-150x150.jpg\" >\r\n                    The World&#039;s Largest Skating Rink                <\/option>\r\n                            <\/select>\r\n            <div class=\"selected-video-preview\">\r\n                <img decoding=\"async\" src=\"https:\/\/cathyzhang.ca\/sample\/wp-content\/uploads\/2025\/04\/lavenders-6482952_1280-150x150.jpg\" alt=\"Selected video thumbnail\">\r\n                <span>Sea<\/span>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n\r\n<style>\r\n    .video-gallery-container {\r\n        display: flex;\r\n        gap: 20px;\r\n        max-width: 1200px;\r\n        margin: 0 auto;\r\n    }\r\n\r\n    .main-video {\r\n        flex: 2;\r\n    }\r\n\r\n    .main-video video {\r\n        width: 100%;\r\n        display: block;\r\n        border: purple 3px solid;\r\n        border-radius: 8px;\r\n    }\r\n\r\n    .video-list {\r\n        flex: 1;\r\n        position: relative;\r\n    }\r\n\r\n    .desktop-list {\r\n        height: 0;\r\n        overflow-y: auto;\r\n        scrollbar-width: thin;\r\n        scrollbar-color: #888 #f1f1f1;\r\n    }\r\n\r\n    .desktop-list::-webkit-scrollbar {\r\n        width: 6px;\r\n    }\r\n\r\n    .desktop-list::-webkit-scrollbar-track {\r\n        background: #f1f1f1;\r\n    }\r\n\r\n    .desktop-list::-webkit-scrollbar-thumb {\r\n        background: #888;\r\n        border-radius: 3px;\r\n    }\r\n\r\n    .video-item {\r\n        cursor: pointer;\r\n        margin-bottom: 10px;\r\n        position: relative;\r\n    }\r\n\r\n    .thumbnail-container {\r\n        position: relative;\r\n        width: 100%;\r\n        padding-top: 56.25%;\r\n    }\r\n\r\n    .thumbnail-container img {\r\n        position: absolute;\r\n        top: 0;\r\n        left: 0;\r\n        width: 100%;\r\n        height: 100%;\r\n        object-fit: cover;\r\n    }\r\n\r\n    .video-title {\r\n        position: absolute;\r\n        top: 0px;\r\n        left: 0;\r\n        right: 0;\r\n        background: rgba(127, 25, 229, 0.7);\r\n        color: white;\r\n        padding: 5px;\r\n        opacity: 0;\r\n        transition: opacity 0.3s;\r\n    }\r\n\r\n    #main-title {\r\n        text-align: center;\r\n        color: purple;\r\n    }\r\n\r\n    .video-item:hover .video-title {\r\n        opacity: 1;\r\n    }\r\n\r\n    .play-icon {\r\n        position: absolute;\r\n        top: 50%;\r\n        left: 50%;\r\n        transform: translate(-50%, -50%);\r\n        background: rgba(0, 0, 0, 0.7);\r\n        color: white;\r\n        padding: 10px;\r\n        border-radius: 50%;\r\n        display: none;\r\n    }\r\n\r\n    .play-icon.active {\r\n        display: block;\r\n    }\r\n\r\n    .video-item.active .thumbnail-container {\r\n        border: 2px solid #ff0000;\r\n    }\r\n\r\n    .mobile-select-container {\r\n        display: none;\r\n        width: 100%;\r\n        margin-top: 10px;\r\n    }\r\n\r\n    .mobile-dropdown {\r\n        width: 100%;\r\n        padding: 10px;\r\n        margin-bottom: 10px;\r\n        appearance: menulist;\r\n        -webkit-appearance: menulist;\r\n    }\r\n\r\n    .selected-video-preview {\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 10px;\r\n        padding: 10px;\r\n        background: rgba(127, 25, 229, 0.7);\r\n        color: #fff;\r\n        border-radius: 4px;\r\n    }\r\n\r\n    .selected-video-preview img {\r\n        width: 60px;\r\n        height: 60px;\r\n        object-fit: cover;\r\n        box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(255, 255, 255, 0.3) 0px 30px 60px -30px;\r\n    }\r\n\r\n    @media (max-width: 768px) {\r\n        .video-gallery-container {\r\n            flex-direction: column;\r\n        }\r\n\r\n        .desktop-list {\r\n            display: none;\r\n        }\r\n\r\n        .mobile-select-container {\r\n            display: block;\r\n        }\r\n    }\r\n\r\n<\/style>\r\n\r\n<script>\r\n    jQuery(document).ready(function($) {\r\n        function setVideoListHeight() {\r\n            const mainVideoHeight = $('.main-video video').height();\r\n            $('.desktop-list').height(mainVideoHeight);\r\n        }\r\n\r\n        \/\/ Initial setup\r\n        setVideoListHeight();\r\n\r\n        \/\/ Update on window resize\r\n        $(window).on('resize', function() {\r\n            setVideoListHeight();\r\n        });\r\n\r\n        \/\/ Handle video selection (desktop)\r\n        $('.video-item').click(function() {\r\n            const videoUrl = $(this).data('url');\r\n            const videoTitle = $(this).data('title');\r\n\r\n            $('#main-player').attr('src', videoUrl);\r\n            $('#main-title').text(videoTitle);\r\n\r\n            $('.video-item').removeClass('active');\r\n            $('.play-icon').removeClass('active');\r\n            $(this).addClass('active');\r\n            $(this).find('.play-icon').addClass('active');\r\n\r\n            $('#main-player')[0].play();\r\n        });\r\n\r\n        \/\/ Handle video selection (mobile)\r\n        $('.mobile-dropdown').change(function() {\r\n            const selectedOption = $(this).find('option:selected');\r\n            const videoUrl = selectedOption.val();\r\n            const videoTitle = selectedOption.data('title');\r\n            const thumbnail = selectedOption.data('thumbnail');\r\n\r\n            $('#main-player').attr('src', videoUrl);\r\n            $('#main-title').text(videoTitle);\r\n\r\n            \/\/ Update preview\r\n            $('.selected-video-preview img').attr('src', thumbnail);\r\n            $('.selected-video-preview span').text(videoTitle);\r\n\r\n            $('#main-player')[0].play();\r\n        });\r\n    });\r\n\r\n<\/script>\r\n\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>FashionFusion: Our Journey<\/strong><\/h3>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>2015 \u2013 The Beginning<\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Founded in <strong>Los Angeles, CA<\/strong> by <strong>Alex Morgan<\/strong> with a small collection of <strong>10 sustainable t-shirts<\/strong>.<\/li>\n\n\n\n<li>Launched first e-commerce website with <strong>local U.S. shipping only<\/strong>.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>2016 \u2013 First Milestones<\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Expanded product line to include <strong>dresses and denim<\/strong>.<\/li>\n\n\n\n<li>Reached <strong>10,000 customers<\/strong> and introduced <strong>free domestic shipping<\/strong>.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>2017 \u2013 Growth &amp; Recognition<\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Featured in <strong>Vogue\u2019s &#8220;Best Emerging Brands&#8221;<\/strong> list.<\/li>\n\n\n\n<li>Launched first <strong>pop-up store in NYC<\/strong>.<\/li>\n\n\n\n<li>Started <strong>international shipping to Canada &amp; UK<\/strong>.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>2018 \u2013 Sustainability Commitment<\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Switched to <strong>100% eco-friendly packaging<\/strong>.<\/li>\n\n\n\n<li>Partnered with <strong>fair-trade factories<\/strong> in Portugal.<\/li>\n\n\n\n<li>Reached <strong>$1M in annual sales<\/strong>.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>2019 \u2013 Retail Expansion<\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Opened first <strong>permanent flagship store in LA<\/strong>.<\/li>\n\n\n\n<li>Launched <strong>loyalty rewards program<\/strong>.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>2020 \u2013 Adapting to Change<\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Pivoted to <strong>virtual styling consultations<\/strong> during the pandemic.<\/li>\n\n\n\n<li>Donated <strong>5% of profits to garment workers\u2019 relief funds<\/strong>.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>2021 \u2013 Celebrity Collaboration<\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Partnered with <strong>influencer Taylor Rae<\/strong> for a <strong>limited-edition collection<\/strong>.<\/li>\n\n\n\n<li>Surpassed <strong>500,000 Instagram followers<\/strong>.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>2022 \u2013 Tech Innovation<\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Introduced <strong>AI-powered size recommendations<\/strong>.<\/li>\n\n\n\n<li>Launched <strong>AR virtual try-on feature<\/strong> in the app.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>2023 \u2013 Global Reach<\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Expanded to <strong>20+ countries<\/strong> with same-day delivery in major cities.<\/li>\n\n\n\n<li>Named <strong>&#8220;Most Innovative Brand&#8221; by FashionTech Awards<\/strong>.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>2024 &amp; Beyond<\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Planning <strong>physical stores in Europe &amp; Asia<\/strong>.<\/li>\n\n\n\n<li>Committed to <strong>carbon-neutral shipping by 2025<\/strong>.<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Key Elements to Include in Your Timeline:<\/strong><\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Founding Year<\/strong> \u2013 How\/why the company started.<\/li>\n\n\n\n<li><strong>Product Milestones<\/strong> \u2013 Key launches or expansions.<\/li>\n\n\n\n<li><strong>Geographic Growth<\/strong> \u2013 When you went national\/international.<\/li>\n\n\n\n<li><strong>Awards &amp; Press<\/strong> \u2013 Major recognitions.<\/li>\n\n\n\n<li><strong>Tech\/Innovation<\/strong> \u2013 App launches, AR features, etc.<\/li>\n\n\n\n<li><strong>Social Responsibility<\/strong> \u2013 Sustainability efforts, charity work.<\/li>\n\n\n\n<li><strong>Future Goals<\/strong> \u2013 Upcoming projects.<\/li>\n<\/ol>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Shortcode: cz_six_video FashionFusion: Our Journey 2015 \u2013 The Beginning 2016 \u2013 First Milestones 2017 \u2013 Growth &amp; Recognition 2018 \u2013 Sustainability Commitment 2019 \u2013 Retail Expansion 2020 \u2013 Adapting to Change 2021 \u2013 Celebrity Collaboration 2022 \u2013 Tech Innovation 2023 \u2013 Global Reach 2024 &amp; Beyond Key Elements to Include in Your Timeline:<\/p>\n","protected":false},"author":890,"featured_media":0,"parent":0,"menu_order":11,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1381","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/cathyzhang.ca\/sample\/wp-json\/wp\/v2\/pages\/1381","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cathyzhang.ca\/sample\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/cathyzhang.ca\/sample\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/cathyzhang.ca\/sample\/wp-json\/wp\/v2\/users\/890"}],"replies":[{"embeddable":true,"href":"https:\/\/cathyzhang.ca\/sample\/wp-json\/wp\/v2\/comments?post=1381"}],"version-history":[{"count":4,"href":"https:\/\/cathyzhang.ca\/sample\/wp-json\/wp\/v2\/pages\/1381\/revisions"}],"predecessor-version":[{"id":1499,"href":"https:\/\/cathyzhang.ca\/sample\/wp-json\/wp\/v2\/pages\/1381\/revisions\/1499"}],"wp:attachment":[{"href":"https:\/\/cathyzhang.ca\/sample\/wp-json\/wp\/v2\/media?parent=1381"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}