Last active
July 25, 2017 22:05
-
-
Save noahub/65ac6f11b3e91c8d92b3445157d5975f to your computer and use it in GitHub Desktop.
Fixed Video On-Scroll
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<style> | |
/* Replace with your 'close' button ID */ | |
#lp-pom-button-16 { | |
display:none; | |
} | |
.lp-pom-video{ | |
transition:all 0.4s linear; | |
} | |
.smallVid { | |
left: 0 !important; | |
top: 0 !important; | |
z-index: 999 !important; | |
ms-transform: scale(0.5, 0.5); | |
-webkit-transform: scale(0.5, 0.5); | |
transform: scale(0.5, 0.5); | |
-webkit-transform-origin-x: 0; | |
-webkit-transform-origin-y: 0; | |
transform-origin:0 0; | |
position: fixed !important; | |
display: block !important; | |
box-shadow: 0px 0px 10px 3px rgba(0,0,0,0.3); | |
} | |
.vidAdjust{ | |
margin-top: 1%; | |
margin-left: 1%; | |
} | |
</style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script> | |
//Replace with your video's ID | |
var video = "#lp-pom-video-13"; | |
//Replace with your 'close' button ID | |
var button = "#lp-pom-button-16"; | |
//Optional: adjust in pixels when the video transitions | |
var showHeight = 400; | |
var targetClass = "smallVid"; | |
var adjustClass = "vidAdjust"; | |
var classSelect = ".smallVid"; | |
var noClose = true; | |
var initWidth = $(video).width(); | |
var initHeight = $(video).height(); | |
$(window).scroll( function() { | |
if ($(this).scrollTop() > showHeight && noClose) { | |
$(video).addClass(targetClass + " " + adjustClass); | |
$(button).addClass(targetClass); | |
} else { | |
$(video).removeClass(targetClass, adjustClass); | |
$(button).removeClass(targetClass); | |
} | |
}); | |
$(button).click(function(){ | |
$(video).removeClass("smallVid vidAdjust"); | |
$(button).removeClass("smallVid"); | |
targetClass - null; | |
adjustClass - null; | |
noClose = false; | |
}); | |
</script> |
@threshnoberly check this post out for a demo & instructions:
https://community.unbounce.com/t/how-to-add-a-sticky-video-widget/4085
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
view demo ???