Content Video

@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";

.block-content-video{
    padding: 3em 0;
    
    @include bp($lg){
        padding: 6em 0;
    }
    .heading{
        @include fluid-type(20, 40, 375, $max-container-size);
        letter-spacing: 0.02em;
        font-weight: 300;            
        strong{
            font-weight: 600;
        }
    }
    .heading-col{
        @include bp($lg){
            padding-bottom: rem-calc(52);
        }
        > *{
            max-width: rem-calc(526);
        }
    }
    .content-col{
        color: $black2;
        
        @include bp($lg){
            display: flex;
            justify-content: flex-end;
            padding-bottom: rem-calc(52);
        }
        > *{
            max-width: rem-calc(526);
        }
        p{
            @include fluid-type(16, 20, 375, $max-container-size);
            line-height: rem-calc(28);
            letter-spacing: 0.05em;
        }
    }
    .video-item{
        overflow: hidden;
        border-radius: rem-calc(16);
        display: block;
        position: relative;
        @include bp($md){
            border-radius: rem-calc(40);
        }
        picture{
            line-height: 0;
        }
        video,
        iframe,
        img {
            display: block;
            aspect-ratio: 16 / 9;
            object-fit: cover;
            transition: transform 0.3s ease-in-out;
            width: 100%;
        }
        .play-icon {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 5;
            width: rem-calc(42);
            height: rem-calc(42);
            border-radius: 100%;
            background-color: $white;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: background-color 0.3s ease-in-out;
            
            svg {
                position: absolute;
                top: 50%;
                left: 55%;
                transform: translate(-55%, -50%);
                color: $primary;
                transition: color 0.3s ease-in-out;
                width: 17px;
            }

            @include bp($lg){
                width: rem-calc(92);
                height: rem-calc(92);
                
                svg {
                    width: 34px;
                }
            }
        }
        &:hover {
            .play-icon {
                background-color: $white;
    
                svg {
                    color: $secondary;
                }
            }
            img {
                transform: scale(1.02);
            }
        }
    }
    &.bg--primary{
        .overline,
        .heading,
        .content-col{
            color: $white;
        }
    }
    &.bg--secondary{
        .overline,
        .heading,
        .content-col{
            color: $white;
        }
    }
}

class ContentVideo {
	/**
	 * Create and initialise objects of this class
	 * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/constructor
	 * @param {object} block
	 */
	constructor() {
		this.blocks = document.querySelectorAll('.block-content-video');
		this.init();
	}

	/**
	 * Example function to run class logic
	 * Can access `this.block`
	 */
	init() {
        let thisObj = this;
		this.blocks.forEach((block) => {
			let video = block.querySelector('video');            
		});
	}
}

new ContentVideo();