7 Correct answers
@REELHERO- you can do something very similar to the example you showed:
Store your video information in an array of javascript objects (see the full page code below, name and title. Change to your video names and titles. Add however many name and titles you need. Include a comma after each line, except for the last entry).
Store your actual video files in a folder named 'movies'. You can name the folder what you like BUT the code below looks for the videos in a folder named 'movies' - (video.sr
...
i also noticed the video does not resize to fit the browser window - it crops the vid and unfortuntely i cant have that since its a showcase site - see the reference site -https://smugglersite.com/ if you resize the browser- the video resizes
By @REELHERO
No, the video is cropped to fit the screen. Look at the site on mobile in portrait orientation and then landscape orientation. You can't have a full page video or image without some part being cropped.
...one more thing - how would i slide up bu
---
1) for some reason the first vid doesnt show (ocean2.mp4) even though it is linked correctly..
By @REELHERO
You havent updated the javascript correctly. The 'default when page loads' should be as follows:
// Default when page loads
setTimeout(function() {
videoText.classList.add('slideUp' , 'fullOpacity');
setTimeout(function(){
video.classList.add('fullOpacity');
},100);
},300);
...Boom- you are wonderful and generous 🙂
2) still having the order issue it jumps from the opening vid (todd heyman) to
Unfortunately you have mangled the code l originally provided where its getting time consuming to keep putting it right. You can't successfully combine font sizes set in em and then just randomly guess at some percentage size to set for text within a container which has been set using em, it's a complete mess and why you are getting unwanted vertical space. I mean why on earth have you set bottom padding using viewport width instead of px or em, it makes no sense.
As for time delay yes of cours
...
See updated code below. Radical amendments to the code but should need very little changes to the code from your end - font and font sizes.
I've used the font-awesome 6 library to create the plus icons, its much cleaner.
Copy code, paste in a new document, save to your site folder and view.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Animation Delay</title>
<link rel="preconnect" href="https:
could you point out where to adjust speed of fade and slide up in the script ?- i can guess but just to be sure
By @REELHERO
Try adjusting how long the transitions take:
transition: all 1s ease-in-out;
Plus you can set the 700 to less:
myInterval = setInterval(textAnimateFunc, 700);
However there's no real 100% way, apart from keep tinkering around with the various css/javascript settings.
48
Replies
i also noticed the video does not resize to fit the browser window - it crops the vid and unfortuntely i cant have that since its a showcase site - see the reference site -https://smugglersite.com/ if you resize the browser- the video resizes
By @REELHERO
No, the video is cropped to fit the screen. Look at the site on mobile in portrait orientation and then landscape orientation. You can't have a full page video or image without some part being cropped.
one more thing - how would i slide up but dissolve out the title rather than slide back down-- like my site does currently https://toddheymandirector.com/
You would need to update the code (see in bold below where code has been added or altered - it also shows how you would add a 'directors name').
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Full Page Video Content</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Source+Serif+Pro:wght@300;400&display=swap" rel="stylesheet">
<style>
body {
margin: 0;
font-family: 'Source Serif Pro', serif;
}
.videoShowcase {
display: flex;
flex-direction: column;
height: 100vh;
width: 100vw;
justify-content: center;
align-items: center;
overflow: hidden;
}
.videoContainer {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
background-color: #000;
}
.videoContainer::after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: '';
background-color: rgba(0, 0, 0, 0.3);
}
.videoContainer video {
min-width: 100%;
min-height: 100%;
object-fit: cover;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: all 1s ease-in-out;
opacity: 0;
}
.videoText {
z-index: 10;
transform: translateY(500%);
transition: all 1s ease-in-out;
opacity: 0;
}
.videoText h2 {
margin: 0;
padding: 0;
color: #fff;
text-align: center;
font-size: 45px;
font-weight: 400;
}
.videoText h4 {
margin: 0;
padding: 0;
color: #fff;
text-align: center;
font-size: 25px;
font-weight: 400;
}
.slideUp {
transform: translateY(0);
}
.fullOpacity {
opacity: 1!important;
}
</style>
</head>
<body>
<section class="videoShowcase">
<div class="videoContainer">
<video class="video" src="movies/movie_1.mp4" autoplay muted></video>
</div>
<div class="videoText">
<h2>Video Title 1</h2>
<h4>Director 1</h4>
</div>
</section>
<script>
const videoText = document.querySelector('.videoText');
const video = document.querySelector('.video');
const videos = [
{name: 'movie_1.mp4' , title: 'Video Title 1' , director: 'Director 1'},
{name: 'movie_2.mp4' , title: 'Video Title 2' , director: 'Director 2'},
{name: 'movie_3.mp4' , title: 'Video Title 3' , director: 'Director 3'}
];
// Default when page loads
setTimeout(function() {
videoText.classList.add('slideUp' , 'fullOpacity');
setTimeout(function(){
video.classList.add('fullOpacity');
}, 200);
}, 500);
let count = 0;
// Change content after 6 seconds
setInterval(function() {
videoText.classList.remove('fullOpacity');
video.classList.remove('fullOpacity');
setTimeout(function(){
videoText.classList.remove('slideUp');
}, 1000);
count === videos.length - 1 ? count = 0 : count++;
setTimeout(function(){
videoText.classList.add('slideUp' , 'fullOpacity');
videoText.innerHTML = `
<h2>${videos[count].title}</h2>
<h4>${videos[count].director}</h4>
`;
}, 2000);
setTimeout(function(){
video.src=`movies/${videos[count].name}`;
video.classList.add('fullOpacity');
}, 1000);
}, 6000)
</script>
</body>
</html>
Boom- you are wonderful and generous 🙂
ok almost working perfectly https://toddheymandirector.com/index_video4.html
styled it and perfectly and adjusted the timings - theyre not perfect yet but Ill nail it
---
1) for some reason the first vid doesnt show (ocean2.mp4) even though it is linked correctly..
2) still having the order issue it jumps from the opening vid (todd heyman) to the second video (vrbo) instead of the first (nike) - until it cycles through then goes to the first
3) copy re- fullscreen- instead is it possible to have it 100%width instead then ? ie a 100 pix margin at the top to act as a header and the vid stays full width and anything below is just the background color like
again thank you Osgood you are very gracious with your time - I hope Im doing you proud !
---
1) for some reason the first vid doesnt show (ocean2.mp4) even though it is linked correctly..
By @REELHERO
You havent updated the javascript correctly. The 'default when page loads' should be as follows:
// Default when page loads
setTimeout(function() {
videoText.classList.add('slideUp' , 'fullOpacity');
setTimeout(function(){
video.classList.add('fullOpacity');
},100);
},300);
Boom- you are wonderful and generous 🙂
2) still having the order issue it jumps from the opening vid (todd heyman) to the second video (vrbo) instead of the first (nike) - until it cycles through then goes to the first
You have to include the initial video in the array of objects as the 1st object:
const videos = [
{name: 'ocean2.mp4' , title: 'todd heyman' , director: '<span class="smaller">+</span>director<span class="smaller">+</span>'},
{name: 'nike_getaway.mp4' , title: 'Nike' , director: '<span class="smaller">+</span>the getaway<span class="smaller">+</span>'},
{name: 'vrbo.mp4' , title: 'vrbo' , director: '<span class="smaller">+</span>a family bond<span class="smaller">+</span>'},
{name: 'bartenura.mp4' , title: 'bartenura' , director: '<span class="smaller">+</span>the text<span class="smaller">+</span>'}
];
You also ONLY needs these 2 classes in your css:
.slideUp {
transform: translateY(0);
}
.fullOpacity {
opacity: 1!important;
}
You still have this duplicated selector included in your css:
.slideUp {
transform: translateY(0);
opacity: 1;
}
If you were to group things together instead of splashing them around all over the place you will find it much easier to manage.
3) copy re- fullscreen- instead is it possible to have it 100%width instead then ? ie a 100 pix margin at the top to act as a header and the vid stays full width and anything below is just the background color like
Instead of this:
.videoContainer video {
min-width: 100%;
min-height: 100%;
object-fit: cover;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: all 1s ease-in-out;
opacity: 0;
}
Use this:
.videoContainer video {
width: 100%;
height: auto;
position: absolute;
top: 0;
transition: all 1s ease-in-out;
opacity: 0;
}
BUT its likely you will have to change some other css as well to get the layout back as you want it!
I cant see the point really. It looks quite ugly and pointless on mobile devices.
If you wanted the whole of the video to show then you should have deployed a responsive video player NOT something which is really just an eye-candy solution
AdChoices