I'm attempting to have a YouTube video auto-play when the user scrolls to it and stops when the user scrolls past it. This works fine thanks to this post "JQuery Autoplaying Youtube videos on scroll". Now I want to also do this with window.scroll but it fails. It seems to me that the div containing updated iframe tag is not loaded with youtube APIIframe ready. any one know why. Really appreciate your help?.
Below are my codes
<style type="text/css">
iframe {
width: 200px;
height: 200px;
margin: 10px 10px 100px 10px;
}
</style>
<div id="wrap" class="content" style="border:groove">
<iframe style="margin-top:200px" id="playerA" frameborder="0" title="YouTube video player" type="text/html" src="https://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1"></iframe><br/>
<iframe id="playerB" frameborder="0" title="YouTube video player" type="text/html" src="https://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1"></iframe><br/>
<iframe style="margin-bottom:200px" id="playerC" frameborder="0" title="YouTube video player" type="text/html" src="https://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1"></iframe>
<div style="height:800px"></div>
</div>
<script type='text/javascript'>//<![CDATA[
function my_first(){
var LoadVideo = function(player_id){
var Program = {
Init: function(){
this.NewPlayer();
this.EventHandler();
},
NewPlayer: function(){
var _this = this;
this.Player = new YT.Player(player_id,{});
_this.Player.$element = $('#' + player_id);
},
Play: function(){
if( this.Player.getPlayerState() === 1 ) return;
this.Player.playVideo();
},
Pause: function(){
if( this.Player.getPlayerState() === 2 ) return;
this.Player.pauseVideo();
},
ScrollControl: function(){
//alert('player='+player_id);
//alert('total='+Utils.IsElementInViewport(this.Player.$element[0]) );
if( Utils.IsElementInViewport(this.Player.$element[0]) ) this.Play();
else this.Pause();
},
EventHandler: function(){
var _this = this;
$(window).on('scroll', function(){//alert(player_id)
_this.ScrollControl();
});
}
};
var Utils = {
IsElementInViewport: function(el){
if (typeof jQuery === "function" && el instanceof jQuery) el = el[0];
var rect = el.getBoundingClientRect();
return (
rect.top >= 100 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
rect.bottom <= 400 &&
rect.right <= (window.innerWidth || document.documentElement.clientWidth)
);
}
};
return Program.Init();
};
$('iframe').each(function(){
LoadVideo($(this).attr('id'));
});
}
function yHandler(){
var wrap=document.getElementById('wrap') ;
var contentHeight = wrap.offsetHeight;//get page content height
var yOffset = window.pageYOffset;//get vertical scroll position
var y = yOffset+ window.innerHeight;
if(y >= contentHeight) {//alert(1234)
wrap.innerHTML += '<div class="newData"><iframe style="margin-top:0px" id="playerD" frameborder="0" title="YouTube video player" type="text/html" src="https://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1"></iframe><br/><iframe style="margin-top:0px" id="playerE" frameborder="0" title="YouTube video player" type="text/html" src="https://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1"></iframe><br/><iframe style="margin-top:0px" id="playerF" frameborder="0" title="YouTube video player" type="text/html" src="https://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1"></iframe><br/><div style="height:500px"></div></div>';
}
}
window.onscroll = function () {
$.getScript('//www.youtube.com/player_api');
yHandler();
my_first();
}
you should be used append not innerHTML.
original:
wrap.innerHTML += '<div class="newData"><iframe style="margin-top:0px" id="playerD" frameborder="0" title="YouTube video player" type="text/html" src="https://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1"></iframe><br/><iframe style="margin-top:0px" id="playerE" frameborder="0" title="YouTube video player" type="text/html" src="https://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1"></iframe><br/><iframe style="margin-top:0px" id="playerF" frameborder="0" title="YouTube video player" type="text/html" src="https://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1"></iframe><br/><div style="height:500px"></div></div>';
edit:
$(wrap).append( '<div class="newData"><iframe style="margin-top:0px" id="playerD" frameborder="0" title="YouTube video player" type="text/html" src="https://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1"></iframe><br/><iframe style="margin-top:0px" id="playerE" frameborder="0" title="YouTube video player" type="text/html" src="https://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1"></iframe><br/><iframe style="margin-top:0px" id="playerF" frameborder="0" title="YouTube video player" type="text/html" src="https://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1"></iframe><br/><div style="height:500px"></div></div>' );
reference:
jquery .html() vs .append()
hope it helps
UPDATE
create iframe with different id
function createVideo( $element, url ) {
$element.append( '<iframe style="margin-top:0px" id="player' + $( 'iframe' ).length + 1 + '" frameborder="0" title="YouTube video player" type="text/html" src="' + url + '"></iframe><br/>');
}
createVideo( $(wrap), "https://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1" );
createVideo( $(wrap), "https://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1" );
createVideo( $(wrap), "https://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1" );
$(wrap).append( '<div style="height:500px"></div>');
Related
I have iframe video box in this I Want to disable share option and go to you tube in my iframe video box.
enter image description here
My code:
<div class="container">
<div class="row">
<div class="col-12">
<h2 align="center"></h2>
<?php foreach ($fetchvideos as $fetchvideo) : ?>
<div class="col-lg-4 col-md-4 col-sm-6 " style="position: relative;" >
<iframe oncontextmenu="return false" class="yt_players" id="<?php echo $fetchvideo->id?>" width="972" height="284" src="<?php echo $fetchvideo->Links?>?rel=0&wmode=Opaque&enablejsapi=1;showinfo=0;" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture">
</style> allowfullscreen></iframe>
</div>
<?php endforeach; ?>
</div>
</div>
</div>
<script>
players = new Array();
function onYouTubeIframeAPIReady() {
var temp = $("iframe.yt_players");
for (var i = 0; i < temp.length; i++) {
var t = new YT.Player($(temp[i]).attr('id'), {
events: {
'onStateChange': onPlayerStateChange
}
});
players.push(t);
}
}
onYouTubeIframeAPIReady();
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING) {
var temp = event.target.getVideoUrl();
var tempPlayers = $("iframe.yt_players");
for (var i = 0; i < players.length; i++) {
if (players[i].getVideoUrl() != temp) players[i].stopVideo();
}
}
}
</script>
I do not know to do it.
How can I make this video play again after it resets using the custom function "resetVideo"?
Everything resets back to the start of the video and displays the poster image, but when I click the play button, nothing plays.
<video id="hero-video" width="100%" preload="auto" style="visibility: visible; width: 100%;" poster="http://www.jplayer.org/video/poster/Big_Buck_Bunny_Trailer_480x270.png">
<source src="http://www.jplayer.org/video/ogv/Big_Buck_Bunny_Trailer.ogv" type="video/ogg codecs='theora, vorbis'">
<source src="http://www.jplayer.org/video/webm/Big_Buck_Bunny_Trailer.webm" type="video/webm codecs='vp8, vorbis'">
<source src="http://www.jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v" type="video/mp4 codecs='avc1.42E01E, mp4a.40.2'">
</video>
<div id="buttonbar">
<button id="restart" onclick="restart();">[]</button>
<button id="play" onclick="vidplay()">></button>
</div>
<div class="banner-box">
<h1>Headline</h1>
<p>copy</p>
link
</div>
<script type="text/javascript">
var video = document.getElementById("hero-video");
var button = document.getElementById("play");
var bannerContent = document.getElementById("video-ad-banner");
setTimeout(function(){ $(bannerContent).fadeOut(); video.play();}, 5000);
video.addEventListener("ended", resetVideo, false);
function vidplay() {
if (video.paused) {
video.play();
button.textContent = "||";
$(bannerContent).fadeOut();
} else {
video.pause();
button.textContent = ">";
$(bannerContent).fadeIn();
}
}
function resetVideo() {
this.src = this.src;
video.currentTime = 0;
$(bannerContent).fadeIn();
}
function restart() {
video.currentTime = 0;
}
</script>
Background:
I created a (HTML,CSS, JS) lightbox using the tutorial here. When the lightbox overlay div is shown (when the button is clicked), I want to stop the scrollbar ability. That way, when someone is on the page looking at an image in the lightbox, they can't scroll to another part of the page. Then, when the lightbox is closed, the scrollbar ability is enabled again so they can scroll freely. I can't seem to find the right way to do that though.
I tried this:
$(document).css('overflow-y', 'hidden');
But nothing happened when I added it to my code. It was as if I never added it.
Question:
Is there a way to stop the page overflow ability when the lightbox is up and then re-enable it when it is closed?
Sorry if there is a simple answer. I'm new to JavaScript.
Javascript:
function startLightBox() {
var lbBg = document.getElementById("lightBoxBg");
var lb = document.getElementById("lightBox");
var screenTop = $(document).scrollTop();
var currentMid = $(document).scrollTop() + 250;
$('#lightBoxBg').css('top', screenTop);
$('#lightBox').css('top', currentMid);
lbBg.style.display = "block";
lb.style.display = "block";
}
function dismiss() {
var lbBg = document.getElementById("lightBoxBg");
var lb = document.getElementById("lightBox");
var screenTop = $(document).scrollTop();
var currentMid = $(document).scrollTop() + 250;
$('#lightBoxBg').css('top', screenTop);
$('#lightBox').css('top', currentMid);
lbBg.style.display = "none";
lb.style.display = " none";
}
CSS:
#lightBoxBg {
position: absolute;
top: 0px;
left: 0px;
opacity: 0.5;
display: none;
background-color: #000000;
height: 100%;
width: 100%;
}
#lightBox {
position: absolute;
top: 50%;
left: 40%;
display: none;
}
HTML Body
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<iframe width="560" height="315" src="https://www.youtube.com/embed/b6JnMZL3wGs" frameborder="0" allowfullscreen></iframe>
</div>
<div class="col-lg-6">
<iframe width="560" height="315" src="https://www.youtube.com/embed/b6JnMZL3wGs" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<iframe width="560" height="315" src="https://www.youtube.com/embed/b6JnMZL3wGs" frameborder="0" allowfullscreen></iframe>
</div>
<div class="col-lg-6">
<iframe width="560" height="315" src="https://www.youtube.com/embed/b6JnMZL3wGs" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<iframe width="560" height="315" src="https://www.youtube.com/embed/b6JnMZL3wGs" frameborder="0" allowfullscreen></iframe>
</div>
<div class="col-lg-6">
<iframe width="560" height="315" src="https://www.youtube.com/embed/b6JnMZL3wGs" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<iframe width="560" height="315" src="https://www.youtube.com/embed/b6JnMZL3wGs" frameborder="0" allowfullscreen></iframe>
</div>
<div class="col-lg-6">
<iframe width="560" height="315" src="https://www.youtube.com/embed/b6JnMZL3wGs" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<button onclick="startLightBox()">Light Box</button>
</div>
</div>
</div>
<div id="lightBoxBg" onclick="dismiss()">
</div>
<div id="lightBox">
<img src="test2.png" />
</div>
</body>
Try this-
jquery
Use $("body").css("overflow", "hidden"); in startLightBox() function.
And use $("body").css("overflow", "auto"); in dismiss()function.
Javascript
Use
document.documentElement.style.overflow = 'hidden'; // firefox, chrome
document.body.scroll = "no"; // ie only
in startLightBox() function.
And use
document.documentElement.style.overflow = 'hidden'; // firefox, chrome
document.body.scroll = "no"; // ie only
in dismiss()function.
You need to modify the overflow for the selector html, body, you can't directly control document's css - document is not an element.
Here's an example:
var toggled = false;
$('.visible').on('click', 'button', function() {
toggled = !toggled;
$(this).text((toggled ? 'Enable' : 'Disable') + ' scrolling');
$('body, html').css('overflow', toggled ? 'hidden' : '');
});
body {
background-image: linear-gradient(to bottom, white, black);
height: 140vh;
position: relative;
}
.visible, .invisible {
position: absolute;
color: red;
}
.visible {
top: calc(100vh - 2rem);
}
.invisible {
top: calc(140vh - 2rem);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="visible">Visible <button>Disable scrolling</button></div>
<div class="invisible">Invisible</div>
I have this javascript code:
function start1(dis,www){
var visina = screen.availHeight;
var content = '<div id="showRtbn" style="position: fixed;text-align:center;left: 0px;width: 225px;height: 80px;top: 50%;z-index: 9999999;background: #E81515;cursor: pointer; border-radius:5px; margin-left:-15px;"> <iframe src="https://domain.com/hotel/2" style="border:0px #FFFFFF none;" name="myiFrame1" scrolling="no" frameborder="0" marginheight="0px" marginwidth="0px" height="100%" width="100%"></iframe></div> <div id="rtb" style="width:100%; height:100%; opacity:0; position:fixed; box-sizing: border-box; left:0px; top:0px; z-index:99999999; display:none; background:rgba(0, 0, 0, 0.8)"><iframe src="'+www+'" style="border:0px #FFFFFF none;" name="myiFrame" scrolling="yes" frameborder="0" marginheight="0px" marginwidth="0px" height="100%" width="100%"></iframe><div id="hideRtb" style="background:#fff; cursor:pointer; top:15px; right:15px; z-index:9999999; position:fixed; border-radius:25px;"><img style="width:50px; height50px;" src="http://i.imgur.com/QqlcQwu.png"></div></div>';
var newNode = document.createElement("DIV");
newNode.innerHTML = content;
document.body.appendChild(newNode);
var rtb = document.getElementById("rtb"),
timer = null;
document.getElementById("showRtb").addEventListener("click", function() {
if (rtb.style.opacity != 1) {
clearTimeout(timer);
rtb.style.display = "block";
timer = setInterval(function() {
rtb.style.opacity = +rtb.style.opacity + .10;
if (+getComputedStyle(rtb).getPropertyValue("opacity") >= 1) {
clearInterval(timer);
}
}, 30)
}
});
document.getElementById("hideRtb").addEventListener("click", function() {
if (rtb.style.opacity != 0) {
clearTimeout(timer);
timer = setInterval(function() {
rtb.style.opacity = +rtb.style.opacity - .10;
if (+getComputedStyle(rtb).getPropertyValue("opacity") <= 0) {
rtb.style.display = "none";
clearInterval(timer);
}
}, 30)
}
});
}
and as you can see, I create a link inside the body with id showRtb and inside that an iframe with content, but when I click it doesn't work, doesn't want to show div with id rtb ...
When I change the content so instead of an iframe I post an image, then it works well, but now with the iframe it doesn't work. Why? What is the problem?
So, I want when I click on showRtb to open div with ID rtb ...
UPDATE:
var content = '<div id="showRtb1" style="position: fixed;text-align:center;left: 0px;width: 225px;height: 80px;top: 50%;z-index: 9999999;cursor: pointer; border-radius:5px; margin-left:-15px;"><iframe src="https://domain.com/hotel/2" name="myiFrame1" scrolling="no" frameborder="0" marginheight="0px" marginwidth="0px" height="100%" width="100%"></iframe></div><div id="showRtb" style="position: fixed;text-align:center;left: 0px;width: 225px;height: 80px;top: 50%;z-index: 99999999;cursor: pointer; opacity:0; pointer; border-radius:5px; margin-left:-15px;"></div><div id="rtb"><iframe src="'+www+'" name="myiFrame" scrolling="yes" frameborder="0" marginheight="0px" marginwidth="0px" height="100%" width="100%"></iframe><div id="hideRtb"><img src="http://i.imgur.com/QqlcQwu.png"></div></div>';
Change this:
var content = '<div id="showRtbn"> <iframe src="https://domain.com/hotel/2" name="myiFrame1" scrolling="no" frameborder="0" marginheight="0px" marginwidth="0px" height="100%" width="100%"></iframe></div><div id="rtb"><iframe src="'+www+'" name="myiFrame" scrolling="yes" frameborder="0" marginheight="0px" marginwidth="0px" height="100%" width="100%"></iframe><div id="hideRtb"><img src="http://i.imgur.com/QqlcQwu.png"></div></div>';
To be something like:
var content = '<div id="showRtbn"><iframe src="https://domain.com/hotel/2" name="myiFrame1" scrolling="no" frameborder="0" marginheight="0px" marginwidth="0px" height="100%" width="100%"></iframe></div>Show RTB<div id="rtb"><iframe src="'+www+'" name="myiFrame" scrolling="yes" frameborder="0" marginheight="0px" marginwidth="0px" height="100%" width="100%"></iframe><div id="hideRtb"><img src="http://i.imgur.com/QqlcQwu.png"></div></div>';
Remove the iFrame from within the anchor tags (<a>..</a>) and you can set its containing <div> as hidden. NOTE: I've removed your styles. You should consider moving them into a stylesheet
JS:
document.getElementById("showRtb").addEventListener("click", function() {
rtb.style.display = "block";
console.log("clicked");
});
I have several kinds of videos, like this
<video id='abd' height="200" width="200" ></video>
<embed id='bcd' height="200" width="200" ></embed>
<object id='cde' height="200" width="200" ></object>
I have calculated target position like this
<script>
var vid=document.getElementById('abd');
var width = vid.offsetWidth;
var height = vid.height;
var x = width/2+ 'px';
var y = height - 12+'px';
var div = '<div>Heloo</div>';
</script>
Now i want to put a div at position (x,y).
How can i do this. div is stored in var div, Is there any way to do this perfectly,
Your help will be greatful
Thanks
You can do this using pure CSS - no JS required!
The HTML
<div id="video-container">
<iframe width="420" height="315" src="//www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen> </iframe>
<div class="video-overlay">
Overay Content
</div>
</div>
The CSS
#video-container {
position:relative;
width:420px;
}
.video-overlay {
position:absolute;
top:50px;
right:50px;
background:#000;
color:#FFF;
}
See it in action
http://jsfiddle.net/y28Zs/
try this
http://jsfiddle.net/miquelcamps/BJN8x/3/
html
<video id="embed" width="200" height="200" controls>
<source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
javascript
var vid = document.getElementById('embed');
var width = vid.width;
var height = vid.height;
var x = vid.offsetLeft;
var y = vid.offsetTop;
var div = '<div class="overlay" style="height:'+height+'px;width:'+width+'px;left:'+x+'px;top:'+y+'px;">Hello</div>';
document.body.innerHTML += div;
css
.overlay{
position:absolute;
background:red;
z-index:99;
}
Please check is it what you want :
<div id="adds">
<video id='abd' height="200" width="200" style="border:2px solid" ></video>
</div>
Javascript ----
vid=document.getElementById('abd');
addDiv =document.getElementById('adds');
var width = vid.offsetWidth;
var height = vid.height;
var x = width/2+ 'px';
var y = height - 12+'px';
var newDiv = document.createElement("div");
newDiv.innerText = "Hello....";
newDiv.style.left = "102px";
newDiv.style.top = "108px";
newDiv.style.position = "absolute";
addDiv.appendChild(newDiv);
Live demo : (http://jsfiddle.net/7EhtL/)