Skip to main content
This topic has been closed for replies.
Correct answer osgood_

Im probably biting off more than I can chew but I want to at least try before I give up

Im sure youre sick of this ref - but it works great in safari:

 

https://smugglersite.com/global/commercials/kathryn-bigelow/apple-hollywood-in-your-pocket

 

and their vids are even a little larger. hmm.. maybe they pre-load the vids?

 

Meantime Ill test the css/script/code - see if theres a conflict there

 


Im not sure what they are using - a combination of Word Press and nuxt.js it looks like but its impossible these days to decipher the code. Its all packaged and minified into some kind of bundle, lol. Not like the old days when everyone used just plain old html, css and javascript.

 

It seems to work better IF some content is above the video, as like in the example. Ive put a test page together:

 

 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Intersection Observer Test</title>
<style>
h1 {
text-align: center;
padding: 30px;
}
.videoGalleryWrapper {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
width: 90%;
margin:	0 auto;
}

.videoContainer {
position: relative;
opacity: 0;
width: 49.5%;
margin:	0 0 15px 0;
overflow: hidden;
transform: translateY(130px);
transition: all 1s ease-in-out;
}
.videoContainer img {
max-width: 100%;
display: block;
}
video {
width: 100%;
height: auto;
}
.videoOverlay {
position: absolute;
z-index: 10;
top: 0;
width: 100%;
height: 100%;
transition: opacity 500ms ease-in-out;
}
.videoOverlay:hover {
opacity: 0;
}
.videoText {
position: absolute;
bottom: 35px;
width: 100%;
z-index: 20;
transform: translateY(50px);
transition: transform 500ms ease-in-out;
font-size: 20px;
color: #fff;
text-align: center;
}
.fadeInVideo {
opacity: 1;
transform: translateY(0);
}
.slideUpVideoText {
transform: translateY(0);
}
.spacer {
height: 500px;
width: 90%;
margin: 0 auto 30px auto;
background-color: lightgrey;
}
</style>
</head>
<body>

<h1>Intersection Observer Test</h1>
<div class="spacer"></div>

<div class="videoGalleryWrapper">

<div class="videoContainer">
<div class="videoOverlay">
<img src="https://toddheymandirector.com/Images/thumbs/nike_thegetaway.jpg"	alt="">
</div>
<video src="https://toddheymandirector.com/Images/thumbs/nike_thegetaway_hot.mp4" muted class="video"></video>
<div class="videoText">Video 1</div>
</div>

<div class="videoContainer">
<div class="videoOverlay">
<img src="https://toddheymandirector.com/Images/thumbs/nike_thegetaway.jpg"	alt="">
</div>
<video src="https://toddheymandirector.com/Images/thumbs/nike_thegetaway_hot.mp4" muted class="video"></video>
<div class="videoText">Video 2</div>
</div>

<div class="videoContainer">
<div class="videoOverlay">
<img src="https://toddheymandirector.com/Images/thumbs/nike_thegetaway.jpg"	alt="">
</div>
<video src="https://toddheymandirector.com/Images/thumbs/nike_thegetaway_hot.mp4" muted class="video"></video>
<div class="videoText">Video 3</div>
</div>


<div class="videoContainer">
<div class="videoOverlay">
<img src="https://toddheymandirector.com/Images/thumbs/nike_thegetaway.jpg"	alt="">
</div>
<video src="https://toddheymandirector.com/Images/thumbs/nike_thegetaway_hot.mp4" muted class="video"></video>
<div class="videoText">Video 4</div>
</div>

<div class="videoContainer">
<div class="videoOverlay">
<img src="https://toddheymandirector.com/Images/thumbs/nike_thegetaway.jpg"	alt="">
</div>
<video src="https://toddheymandirector.com/Images/thumbs/nike_thegetaway_hot.mp4" muted class="video"></video>
<div class="videoText">Video 5</div>
</div>


<div class="videoContainer">
<div class="videoOverlay">
<img src="https://toddheymandirector.com/Images/thumbs/nike_thegetaway.jpg"	alt="">
</div>
<video src="https://toddheymandirector.com/Images/thumbs/nike_thegetaway_hot.mp4" muted class="video"></video>
<div class="videoText">Video 6</div>
</div>

<div class="videoContainer">
<div class="videoOverlay">
<img src="https://toddheymandirector.com/Images/thumbs/nike_thegetaway.jpg"	alt="">
</div>
<video src="https://toddheymandirector.com/Images/thumbs/nike_thegetaway_hot.mp4" muted class="video"></video>
<div class="videoText">Video 7</div>
</div>

<div class="videoContainer">
<div class="videoOverlay">
<img src="https://toddheymandirector.com/Images/thumbs/nike_thegetaway.jpg"	alt="">
</div>
<video src="https://toddheymandirector.com/Images/thumbs/nike_thegetaway_hot.mp4" muted class="video"></video>
<div class="videoText">Video 8</div>
</div>

</div>
<!-- videoGalleryWrapper -->


<script>
// Assign videoOverlay to variable
const videoOverlay = document.querySelectorAll('.videoOverlay');

// Assign videoText to variable
const videoText = document.querySelectorAll('.videoText');

// Assign videos to variable
let video = document.querySelectorAll(".video")

// Loop through videoOverlay variable and add event listener, play video
videoOverlay.forEach(function(videoOverlay, index) {
videoOverlay.addEventListener("mouseover", function (e) {
video[index].play();
videoText[index].classList.add('slideUpVideoText');
})

// Pause video on mouse out
videoOverlay.addEventListener("mouseout", function (e) {
video[index].pause();
videoText[index].classList.remove('slideUpVideoText');
});

});

</script>


<script>

if ( 'IntersectionObserver' in window ) {

let observer = new IntersectionObserver(function (entries, observer) {
let delay = 0;

entries.forEach(function (entry) {
if (entry.isIntersecting) {
setTimeout(function () {
entry.target.classList.add('fadeInVideo');
}, delay);

delay += 200;

observer.unobserve(entry.target);
}
});
}, { threshold: 0.1 } ); // only show elements when 15% inside bottom of viewport

// observe the elements to be animated
document.querySelectorAll( '.videoContainer' ).forEach( function (el) {
observer.observe(el);
} );

}

</script>

</body>
</html>

 

 

 

 

 

 

2 replies

Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
August 1, 2022

I must call your attention to the elephant in the room. 

1. Redirects are pure poison.

2. When the site is re-built responsively (1 site for all devices), all this mishigas will have to be removed and replaced with a mobile-first approach.

 

Something to think about...

 

Nancy O'Shea— Product User & Community Expert
    O
    osgood_
    Legend
    August 1, 2022
    quote

    I must call your attention to the elephant in the room. 

    1. Redirects are pure poison.

    2. When the site is re-built responsively (1 site for all devices), all this mishigas will have to be removed and replaced with a mobile-first approach.

     

    Something to think about...

     


    By @Nancy OShea

     

    I think some of the eye candy can be mitigated by either removing elements from the dom or 2nd best hiding them and just including a play button for the videos on mobile. It needs thinking about but I agree it seems like madness to build and maintain 2 websites, one for desktop and one for mobile. I see no point where there is little, if any benefit, assuming you manage the content based on what device you are delivering to. 

     

    I think the OP is on a learning curve as this is not their main occupation and to be honest they are doing quiet well given its foreign territory to them.

      R
      REELHEROAuthor
      Inspiring
      August 1, 2022
      quote
      quote

      I must call your attention to the elephant in the room. 

      1. Redirects are pure poison.

      2. When the site is re-built responsively (1 site for all devices), all this mishigas will have to be removed and replaced with a mobile-first approach.

       

      Something to think about...

       


      By @Nancy OShea

       

      I think some of the eye candy can be mitigated by either removing elements from the dom or 2nd best hiding them and just including a play button for the videos on mobile. It needs thinking about but I agree it seems like madness to build and maintain 2 websites, one for desktop and one for mobile. I see no point where there is little, if any benefit, assuming you mange the content based on what device you are delivering to. 

       

      I think the OP is on a learning curve as this is not their main occupation and to be honest they are doing quiet well given its foreign territory to them.


      By @osgood_

      Thank you Osgood thats quite kind. I really do try. And heed your guidance. Im a self taught film director (Im one of the few in the Directors Guild of America - in the company of Speilberg etal..) so I pride myself on learning by diving in..and well, repetition..lots of repetition, to para-quote Malcom Gladwell :)..

       

      I do use a playbutton on mobile https://toddheymandirector.com/mobile/reel/ and I hear you Nancy and cannot deny the extra work that goes into maintaining two sites or the albatross of a redirect- but desktop is priority in my business- production companies and ad agencies make collective decisions about investing sometimes millions into a film director capabilities - so they are viewing in the most optimal environment which is ultimately desktop. So until I have time to learn how to re-develop it into a responsive site (still the goal..The site is only a few pages and movies so its not a monster at this point but of course I want it to operate seamlessly across all platforms/devices just like you all do) -  I have to aim for what I know will dazzle (its still about the film work but presentation counts) on desktop then trickle down to mobile from there not the other way around. 

       

      always grateful for your input

       

      T

        Nancy OShea
        Community Expert
        Nancy OSheaCommunity Expert
        Community Expert
        July 30, 2022

        4 words:  No mouse, no hover.

         

        More than half of internet traffic comes from touch screens -- mobiles, tablets, hybrids & 4K ultra HD interactive displays.

         

        But if you really think this will improve your site, see code example below.

        https://codepen.io/gil411e8085ef/pen/bNxZWg

         

         

         

         

        Nancy O'Shea— Product User & Community Expert
          R
          REELHEROAuthor
          Inspiring
          July 30, 2022

          thank you Nancy -

          Its only for desktop - my mobile site (Im converting my site to responsive as soon as I have time for now its a redirect) doesnt have it for that very reason https://toddheymandirector.com/mobile/

           

          how would i convert that so that i can individual background images and not have it included in the css - since the script includes that class (.video)?

           

           

          Nancy OShea
          Community Expert
          Nancy OSheaCommunity Expert
          Community Expert
          July 30, 2022

          Create separate CSS & JS for each class.  Replace .video and 'video' with your classnames:

          .class1

          .class2

          .class3

          and so on...

           

          Nancy O'Shea— Product User & Community Expert
          Terms & ConditionsAccessibility statement
          Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices