<section class="ai-video ai-component">
<div class="ai-container">
<div class="ai-wrapper">
<div class="ai-video-wrapper">
<div class="ai-video-thumbnail" style="background-image:url('../../images/bitmap/video-poster.jpg');">
<div class="caption">
<p class="text-white">[AI] What dreams are made of</p>
</div>
</div>
<video class="p-0 m-0" id="player-" class="" poster="../../images/bitmap/video-poster.jpg" controls controlslist="nodownload">
<source type="video/mp4" src="../../video/river.mp4">
</video>
</div>
<div class="copy ai-width-m ai-m-auto">
<h2 class="h3 sub-heading">We are vision capitalists. We believe that technology can make the world a happier place</h2>
<div class="ai-w-75">
<p>There is no more powerful technology than AI. That’s why we are investing in AI across the fundamentals of living – from education to medicine to food. And at every level of the technology stack – from hardware through to infrastructure and consumer-facing products. Driving innovation and progress for people across the world and generations to come</p>
<p class="bold">Find out how we think AI could change the world and explore some of our most exciting investments.</p>
</div>
</div>
</div>
</div>
</section>
<section class="ai-video ai-component">
<div class="ai-container">
<div class="ai-wrapper">
{{#if video}}
<div class="ai-video-wrapper">
<div class="ai-video-thumbnail" style="background-image:url('{{{path poster}}}');" >
<div class="caption">
<p class="text-white">{{{caption}}}</p>
</div>
</div>
<video class="p-0 m-0" id="player-" class="" poster="{{{path poster}}}" controls controlslist="nodownload">
<source type="video/mp4" src="{{{path video}}}">
</video>
</div>
{{/if}}
<div class="copy ai-width-m ai-m-auto">
<h2 class="h3 sub-heading">{{{heading}}}</h2>
<div class="ai-w-75">
{{#if text}}
<p>{{{text}}}</p>
{{/if}}
{{#if subtext}}
<p class="bold">{{{subtext}}}</p>
{{/if}}
</div>
</div>
</div>
</div>
</section>
{
"heading": "We are vision capitalists. We believe that technology can make the world a happier place",
"text": "There is no more powerful technology than AI. That’s why we are investing in AI across the fundamentals of living – from education to medicine to food. And at every level of the technology stack – from hardware through to infrastructure and consumer-facing products. Driving innovation and progress for people across the world and generations to come",
"subtext": "Find out how we think AI could change the world and explore some of our most exciting investments.",
"caption": "[AI] What dreams are made of",
"poster": "/images/bitmap/video-poster.jpg",
"video": "/video/river.mp4"
}
// video
const video = {
init() {
if(document.querySelector('.ai-video')){
let thumbs = document.getElementsByClassName('ai-video-thumbnail');
for (let i = 0; i < thumbs.length; i++) {
thumbs[i].addEventListener('click', function(e) {
let v = e.target.nextElementSibling;
let curThumb = e.target;
v.play();
curThumb.classList.add('hide');
v.onpause = () => {
curThumb.classList.remove('hide');
};
v.onseeking = () => {
curThumb.classList.add('hide');
};
e.preventDefault();
});
}
}
}
};
video.init();
export default video;
// video
section{
&.ai-video{
padding: 2rem 0;
.ai-video-wrapper{
position: relative;
video{
width: 100%;
position: relative;
z-index: 1;
}
.ai-video-thumbnail{
position: absolute;
z-index: 2;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
cursor: pointer;
transition: opacity 0.3s;
&.hide{
opacity: 0;
pointer-events: none;
}
&:after{
content: '';
position: absolute;
top: calc(50% - 45px);
left: calc(50% - 45px);
width: 90px;
height: 90px;
background-image: url('../images/icons/ai-video-button.svg');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.caption{
width: 100%;
position: absolute;
left: 0;
top: 0;
padding: 1rem 2rem 1.5rem 2rem;
background: linear-gradient(180deg, rgba(0, 0, 0, 0.80) 0%, rgba(0, 0, 0, 0.70) 30%, rgba(0, 0, 0, 0.70) 70%, rgba(0, 0, 0, 0.00) 100%);
p{
padding: 0;
margin: 0;
}
}
}
}
.copy{
padding: 2rem 0 0 0;
@media (min-width: $large) {
padding: 2rem 0 0 0;
}
h2{
padding-bottom: 1rem;
}
}
}
}
No notes defined.