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.
Related
Trying to play an mp4 iframe on click of a button, but I don't know how.
I tried the below but didn't work
$(this).find("iframe").trigger("play");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<iframe src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4" width="640" height="360" frameborder="0"
allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
you made a typo when writing the video source, maybe mp4 not just mp.
you can try this:
$(document).ready(function() {
$('#play-video').on('click', function(e) {
$("#video")[0].src += "&autoplay=1";
e.preventDefault();
});
});
in document HTML
<a id="play-video" href="#">Title : Elephants Dream</a><br />
<iframe id="video" src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4" width="640" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
My codepen : https://codepen.io/maulanadata/pen/mdKxgme
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>
I have this code:
<a id="play-video" href="#">Play Video</a><br />
<iframe id="video" width="420" height="315" src="//www.youtube.com/embed/9B7te184ZpQ?rel=0" frameborder="0" allowfullscreen></iframe>
and then this jquery which plays the video:
$(document).ready(function() {
$('#play-video').on('click', function(ev) {
$("#video")[0].src += "&autoplay=1";
ev.preventDefault();
});
});
How can I modify the jquery:
$("#video")[0].src += "&autoplay=1";
So that it only plays the selected where I would have multiple iframes?
You can change your video id to another. Ex #video1, #video to control exactly what video you wanna play or wrap that button and video in a div. Then change your code to
<div>
<a id="play-video" href="#">Play Video</a><br />
<iframe id="video" width="420" height="315" src="//www.youtube.com/embed/9B7te184ZpQ?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
And this
$().ready(function () {
$('.play-video').click(function () {
//alert($(this).parent().children('#video').attr(src));
$(this).parent().children('#video').attr('src', function () {
return this + "&autoplay=1";
});
});
});
Demo https://jsfiddle.net/minhthanh/acg8e7f1/
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
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