fm-lp-factory/factory/templates/template1/video/videoWithCardBorderYoutube.js

package created to build web ui components for FidelizarMais LP services

import { updateFmTemplateCss } from "../index.js";


export default (component) => {
    css();  
    const section = document.createElement("section");
    section.classList.add("fm-section-container","fm-video-with-card-border-youtube");
    section.innerHTML = template
        .replace("%title%", component.title)
        .replace("%subtitle%", component.subtitle)
        .replace("%iframeVideo%", component.iframe);

    document.querySelector("#fm-landing-page-content").appendChild(section);
}


const template = /*html*/ `
<div class="fm-video-with-card-border-youtube-container">
    <div class="fm-video-with-card-border-youtube-card">
        <div class="fm-video-with-card-border-youtube-card-content">
            <div class="fm-video-with-card-border-youtube-card-content-header">
                <p class="fm-video-with-card-border-youtube-card-title">%title%</p>
                <p class="fm-video-with-card-border-youtube-card-subtitle">%subtitle%</p>
            </div>
            <div class="fm-video-with-card-border-youtube-video">%iframeVideo%</div>
        </div>
    </div>
</div>
`;


const css = () => {
    updateFmTemplateCss( /*css*/ `
    section.fm-section-container.fm-video-with-card-border-youtube {
        width: 90%;
    }

    .fm-video-with-card-border-youtube-container {
        background: var(--fm-primary-color);
        padding: 45px 0;
        border-radius: var(--fm-base-border-radius);
        width: 100%;
    }
    .fm-video-with-card-border-youtube-card {
        border-radius: var(--fm-base-border-radius);
        background: white;
        width: 85%;
        margin: auto;
    }

    .fm-video-with-card-border-youtube-card-content {
        padding: 30px;
        text-align: center;
    }

    .fm-video-with-card-border-youtube-video iframe {
        width: 100%;
        max-width: 100%;
        border-radius: var(--fm-base-border-radius);
    }

    .fm-video-with-card-border-youtube-card-title{
        font-size: 32px;
        font-weight: bold;
        margin: 0;
    }

    .fm-video-with-card-border-youtube-card-subtitle{
        font-size:18px;
        margin: 0;
    }

    .fm-video-with-card-border-youtube-card-content-header{
        margin-bottom: 30px;
    }

    @media (max-width: 768px) {
        section.fm-section-container.fm-video-with-card-border-youtube{
            width: 100%;
        }

        .fm-video-with-card-border-youtube-card{
            width: 100%;
            border-radius: 0;
        }

        div.fm-video-with-card-border-youtube-container{
            border-radius: 0;
            padding: 60px 0;
        }
    }
    `
    );

}