I have 2 thumbnail links, and when they are clicked on they open up videos in a lightbox style. My goal is to get them to play when they open and pause when they are closed (they close when the background area is clicked on).
My HTML code is here:
<body>
<div id="page">
<br /><br /><br /><br /><br />
<a id="1" class="thumbnail"rel="nofollow"><img class="img1" src="Resources/thumb1.jpg"/></a>
<a id="2"class="thumbnail"rel="nofollow"><img class="img1"src="Resources/thumb2.jpg" /></a>
<div class="backdrop"></div>
<div class="Video"id="vid1" >
<iframe allowscriptaccess="always" class="youtube-player" type="text/html" width="560" height="315" src="http://www.youtube.com/embed/7xHXpebWtus?enablejsapi=1" allowfullscreen="" frameborder="0" id="iframe1"> </iframe>
</div>
<div class="Video"id="vid2">
<iframe allowscriptaccess="always" class="youtube-player" type="text/html" width="560" height="315" src="http://www.youtube.com/embed/PnAsZ1Roxj4?enablejsapi=1" allowfullscreen="" frameborder="0" id="iframe2"> </iframe>
</div>
<br /><br /><br /><br />
<h1>More To Come</h1>
</div>
And my Javascript:
$(document).ready(function(){
$('.thumbnail').click(function(){
var $id = $(this).attr('id');
$('.backdrop, #vid'+ $id).animate({'opacity':'.50'}, 300, 'linear');
$('#vid'+ $id).animate({'opacity':'1.00'}, 300, 'linear');
$('.backdrop, #vid'+ $id).css('display', 'block');
});
$('.backdrop').click(function(){
close_box();
});
});
function close_box()
{
$('.backdrop,.Video').animate({'opacity':'0'}, 300, 'linear', function(){
$('.backdrop,.Video').css('display', 'none');
});
};
I should probably mention that I am quite new to these languages!
You can use YouTube Player API for iframe Embeds. Here is the reference to it. Instead of placing iFRAME tag, you create empty DIV with ID and SCRIPT tag with some JavaScript code. The code then generates an iFRAME and places it on the DOM, removing early created DIV and SCRIPT tags. This allows you to manipulate the player in the SCRIPT tag. Here is the working example in jsFiddle.
P.S. Also please pay attention to the "Requirements" section.
You need to use YouTube API.
Here is tutorial
Related
I'm using an iframe video system with tabs to separate them, the problem I had was that all iframes loaded when you entered that section. I found this answer among many others that could not solve the problem of simultaneous loading To Load a video embed using "onclick" function to optimize a web page but now the problem I have is that using the solution by jquery to choose option 1 (iframe) loads normally but if I press option 2 both continue loading, ie, option 1 continues loading under the other that was pressed.
The system where I'm applying it is Datalife Engine on a .tpl file, and jquery 1.8.2 that I can change it to a more current one but the result is the same
<script>
$(document).ready(function() {
$("#myButton").on("click", function() {
var $iframe = $("#myIframe");
$iframe.attr("src", "https://www.youtube.com/embed/6wUxpFu9Wvo");
$iframe.show();
});
});
$(document).ready(function() {
$("#myButton1").on("click", function() {
var $iframe = $("#myIframe");
$iframe.attr("src", "https://www.youtube.com/embed/6wUxpFu9Wvo");
$iframe.show();
});
});
</script>
<script language="javascript" type="text/javascript">
$(function(){
$('.close').click(function(){
$('iframe').attr('src', $('iframe').attr('src'));
});
});
</script>
<iframe id="myIframe" width="560" height="315" style="display:none;" src="" frameborder="0" allowfullscreen></iframe>
<button id="myButton" class="close">Load video</button>
<iframe id="myIframe1" width="560" height="315" style="display:none;" src="" frameborder="0" allowfullscreen></iframe>
<button id="myButton1" class="close">Load video</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
The final result is that option 1 is still loading below another option, I was trying options to reload iframes but those who bring videos with autoplay continue to load below the new chosen one
You can use the same iFrame and change it's src on click of several buttons.
Following is an example similar to yours with one iFrame and 3 buttons. Each button loads a different video in the same iFrame. I am using youtube video id to differentiate the videos.
$(function() {
$(".myButton").on("click", function() {
var videoId = $(this).data('video-id');
var $iframe = $("#myIframe");
$iframe.attr("src", "https://www.youtube.com/embed/" + videoId);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<iframe id="myIframe" width="560" height="315" src="" frameborder="0" allowfullscreen style="border: 1px solid black;"></iframe>
<br />
<button id="button1" class="myButton" data-video-id="6wUxpFu9Wvo">Load video 1</button>
<button id="button2" class="myButton" data-video-id="z5jnpb_lp4w">Load video 2</button>
<button id="button3" class="myButton" data-video-id="6wUxpFu9Wv2">Load video 3</button>
This script below slides and rebuilds a div with a Youtube video when I press a button.
<script type="text/javascript">//<![CDATA[
$(window).load(function(){
$('#slide_up').click(function(){
$('#slidingDiv').slideToggle('', function (){
var obj = $(this);
if(obj.is(':hidden')){
obj.html( obj.html() );
}
});
});
});//]]>
<div style="display: block;" id="slidingDiv">
<iframe src="http://www.youtube.com/embed/r13a2VUTajU" allowfullscreen="" frameborder="0" height="315" width="560"></iframe>
</div>
<input value="Slide and rebuild" id="slide_up" type="button">
I want to use an image instead of a button.
How should I modify a script to run a slide function after I click on img?
Thanks ;)
<input value="Slide and rebuild" id="slide_up" type="image" src="yourimage.jpg">
This should work. Unless I didn't understand the question
You have to use the onclick attribute
<img src="your src" onclick="your javascript function" />
I want to make it so that the code automatically refreshes a DIV that displays an RSS Feed from last.fm to display the current music playing on my spotify.
This:
<script>
<div id="rss" style="height:25px;">
<iframe src="http://us1.rssfeedwidget.com/getrss.php?time=1400505489628&x=http%3A%2F%2Fws.audioscrobbler.com%2F1.0%2Fuser%2Flukeassassin%2Frecenttracks.rss&bc=333333&bw=1&bgc=transparent&m=1&it=false&t=(default)&tc=333333&ts=15&tb=transparent&il=true&lc=FF0000&ls=28&lb=false&id=false&dc=333333&ds=14&idt=false&dtc=284F2D&dts=12" border="0" hspace="0" vspace="0" frameborder="no" marginwidth="0" marginheight="0" align="center" style="border:0; padding:0; margin:0; width:600px; height:500px; text-align:center;" id="rssOutput"></iframe>
</div>
</div>
</script>
This is what it displays on the page:
I would use javascript to fill the div with the information you want.
Then using an interval you can reload the contents every X seconds
Example: http://jsfiddle.net/T7cZU/3/
Javascript:
$( document ).ready(function() {
ReloadData()
setInterval(function(){ReloadData()}, 1500);
});
function ReloadData(){
$( "#result" ).load( "http://numbersapi.com/random/trivia", function() {});
}
HTML:
<div id="result">
Original content
</div>
or you could simply reload your iframe:
setInterval(function(){
document.getElementById('frame_id').contentWindow.location.reload();
}, 1500);
Updated fiddle with both methods of updating: http://jsfiddle.net/T7cZU/5/
I want a
<iframe width="640" height="360" src="//www.youtube.com/embed/-Uwjt32NvVA?rel=0&autoplay=1" frameborder="0" allowfullscreen style="float: right;"></iframe>
to load after a div is clicked on.
This is because i don't want it to load (since it is autoplay) before the user navigates to it. It is on autoplay because I can't click on the iFrame video in chrome due to chrome bug.
Something like onclick="loadvideo();" will do
Thanks
Use Jquery .load();
function loadVideo() {
$('#div').load('<iframe width="640" height="360" src="//www.youtube.com/embed/-Uwjt32NvVA?rel=0&autoplay=1" frameborder="0" allowfullscreen style="float: right;"></iframe>');
}
Append it to a div once the user clicks on the load button:
<div id='videoDiv'></div>
<a id='loadVideoButton'>LOAD</a>
<script>
var loadVideo = function() {
$('#videoDiv').append("<iframe width="640" height="360" src="//www.youtube.com/embed/-Uwjt32NvVA?rel=0&autoplay=1" frameborder="0" allowfullscreen style="float: right;"></iframe>");
};
$("#loadVideoButton").click(loadVideo());
</script>
This will do the trick
$('div').click(function(){
$(this).html("<iframe width=\"640\" height=\"360\" src=\"//www.youtube.com/embed/-Uwjt32NvVA?rel=0&autoplay=1\" frameborder=\"0\" allowfullscreen style=\"float: right;\"></iframe>"
});
See this js fiddle
The video don't stop to play when prev button is clicked. It only works with next button.
The html code:
<div id="arrow-up">«</div>
<ul id="list">
<li><iframe width="420" height="315" src="http://www.youtube.com/embed/DylcJqqYKLU?rel=0" frameborder="0" allowfullscreen></iframe></li>
<li><iframe width="420" height="315" src="http://www.youtube.com/embed/r1MN4pR5wXM?rel=0" frameborder="0" allowfullscreen></iframe></li>
<li><iframe width="420" height="315" src="http://www.youtube.com/embed/PVzljDmoPVs?rel=0" frameborder="0" allowfullscreen></iframe></li>
</ul>
<div id="arrow-down">»</div>
The script:
$("#list").carouFredSel({
direction: "up",
auto : false,
prev : "#arrow-up",
next : "#arrow-down"
});
And here a demo
Im doing something wrong?
It's working for me on this page:
http://ethosfactory.com/Branding/Projects/Videos.shtml
This is the code I used before the body close tag:
<script type="text/javascript">
$(document).ready(function() {
$('#gallery').nivoGallery({
startPaused: true,
beforeChange: function(index, slide, paused){
$('#gallery video').get(index).pause();
},
});
});
</script>
One issue: The loading of the last slide breaks the script so that none of the Nivo nav works.