hi STM buddies
anyone have the script that can make a .gif image on top of the iframe of the youtube embedded video, so that users cannot see or click the button "You Tube" when mouse hover to the video?
its frequently being done in many vendors in clickbank would love to know how can we do the same?
E.g.
https://www.readingheadstart.com/free-video/?hop=0
you can see we cannot go to youtube and forced to continue watching the video
the code is all there on the page. It is all custom code, so you would have to customize it to suit.
I've copied the example page's code below...
but, I think you are looking for something simpler.
I have seen a guy that makes a plugin to do it too. I think it is called "clever youtube plugin"
<style type="text/css" id="tve_head_custom_css" class="tve_user_custom_style">.video-holder {
position: relative;
border: none;
padding-bottom: 56.271981242673%;
background: #fff 50% 0 no-repeat;
background-size: cover;
margin: 0;
}
.video-overlay {
width: 100%;
height: 100%;
position: absolute;
background: none;
z-index: 2 !important;
top: 0;
left: 0;
}
.coverTap {
background-image: url('https://www.readingheadstart.com/wp-content/uploads/2018/10/RHS_thumb-gif-optimize.gif');
background-size: contain;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
.play-button-bg {
position: absolute;
display: block;
width: 130px;
height: 80px;
border-radius: 5px;
transition: all .2s ease-out;
cursor: pointer;
text-indent: .25em;
top: 50%;
left: 50%;
-webkit-transform: translateY(-50%) translateX(-50%);
transform: translateY(-50%) translateX(-50%);
-ms-transform: translate(-50%,-50%);
background: #da1921 ;
-webkit-transition: all .2s ease-out;
}
.play-button-graphic {
display: block;
width: 130px;
height: 80px;
top: 50%;
left: 50%;
-webkit-transition: all .2s ease-out;
transition: all .2s ease-out;
cursor: pointer;
position: relative;
-webkit-transform: translateY(-50%) translateX(-50%);
transform: translateY(-50%) translateX(-50%);
-ms-transform: translate(-50%,-50%);
}
.play-button-graphic:before {
content: "";
position: absolute;
border: 24px solid transparent;
top: 50%;
border-top-width: 18px;
border-bottom-width: 18px;
border-left-color: #fff ;
z-index: 2003;
left: 50%;
-webkit-transform: translateY(-50%) translateX(-18%);
transform: translateY(-50%) translateX(-18%);
-ms-transform: translate(-18%,-50%);
}
#video-holder iframe { position:absolute;}
.video-overlay-glass {
width: 100%;
height: 100%;
position: absolute;
z-index: 2 !important;
top: 0;
left: 0;
}
.video-overlay-glass {
display: none;
}
</style>
<div class="video-holder homevdo-holder" id="video-holder">
<div class="video-overlay" style="display: block;">
<div class="coverTap" id="coverTap" style="background-image: url('https://thebiorhythm.com/wp-content/uploads/2018/10/RHS_thumb-gif-optimize.gif');">
<div class="play-button-bg">
<div class="play-button-graphic"></div>
</div>
</div>
</div>
<div class="video-overlay-glass" style="display: none;"></div>
<div id="player" style="width:100%;height:100%"></div>
</div>
<div id="video-overlay-click" style="display: none;">0</div>
<code class="tve_js_placeholder"><script>
var cover_tap_bg_img = new Array();
cover_tap_bg_img[0] = "https://thebiorhythm.com/wp-content/uploads/2018/10/RHS_thumb-gif-optimize.gif";
cover_tap_bg_img[1] = "https://www.readingheadstart.com/wp-content/uploads/2018/10/RHS-Thumb-Pause-compressed.gif";
cover_tap_bg_img[2] = "https://www.readingheadstart.com/wp-content/uploads/2018/10/RHS-Thumb-Pause-compressed.gif";
cover_tap_bg_img[3] = "https://www.readingheadstart.com/wp-content/uploads/2018/10/RHS-Thumb-Pause-compressed.gif";
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
var youtube = false;
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
//height: '390',
//width: '640',
videoId: 'vRG3u4nQEYY',
playerVars: { 'autoplay': 0, 'controls': 0,'rel': 0,'modestbranding':1,'showinfo':0,'wmode':'transpa rent' },
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange,
'onError': loadVimeo
}
});
}
function loadVimeo(){
}
function onPlayerReady(event) {
if(youtube){
setTimeout(function(){
$(".video-overlay").hide();
$(".video-overlay-glass").show();
event.target.playVideo();
}, 1000);
}
}
var done = false;
var pauseOnce = function(){
pauseOnce = function(){};
player.pauseVideo();
//player.seekTo(0);
};
function onPlayerStateChange(event) {
if (event.data == 1) {
}
if (event.data==YT.PlayerState.PAUSED){
$(".video-overlay").show();
$(".video-overlay-glass").hide();
}
if (event.data == YT.PlayerState.PLAYING && !done) {
$(".video-overlay").hide();
$(".video-overlay-glass").show();
//setTimeout(stopVideo, 6000);
//done = true;
}
}
function stopVideo() {
player.stopVideo();
}
var img_index = 0;
$(".video-overlay").click(function(){
player.playVideo();
var clk = $("#video-overlay-click").html();
img_index = Number(clk)+1;
if( img_index > 3 ) {
document.getElementById("coverTap").style.backgrou ndImage = 'url('+cover_tap_bg_img[0]+')';
}else{
document.getElementById("coverTap").style.backgrou ndImage = 'url('+cover_tap_bg_img[img_index]+')';
}
$("#video-overlay-click").html( Number(clk)+Number(1));
$(".video-overlay").hide();
$(".video-overlay-glass").show();
});
$(".video-overlay-glass").click(function(){
player.pauseVideo();
$(".video-overlay").show();
$(".video-overlay-glass").hide();
});
</script></code></div></div>
This is really a great share, johnnyn!
Thanks!
Thank you so much johnnyn!!
hi there
sry to bring this up again
i put the style code in header area and put the div script in the main page
the gif shows up but when clicked on the youtube button, it doesnt play the video and wonder whats wrong
for the plugin recommended, seems it doesnt have this function ( but it have indeed many other great functions )