Multiple youtube iframes play play this - javascript

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/

Related

How do I play an iframe mp4 on click using jQuery?

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

Play video in a seperate div on link click

I'm trying to play a video on a seperate div on link click but whenever I click the link instead of playing inside the div it plays on full screen and the link changes to the file path.
$('.link').on('click', function(event) {
event.preventDefault();
var url =$(this).attr("href");
$("#frame").attr("src", url);
})
<div class="live1452">
<iframe allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen id="frame"></iframe>
</div>
<div class="title">
{{l.title}}
</div>
It seems as if it following the link, it shouldn't as you are calling event.preventDefault(), if there were other events wrapping that one you should have to also call event.stopPropagation() but we lack information to know if this could be the case.
I would not use iframe for this, you could try using the html5 video element instead, here is a code snippet:
$('.link').on('click',function(event) {
event.preventDefault();
event.stopPropagation();
var url =$(this).attr("href");
$("#video").attr("src", url);
$("#video")[0].play();
});
video {
width: 300px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="live1452">
<video controls allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen id="video"></video>
</div>
<div class="title">
Sample video
</div>

Load iFrame using Script

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

jQuery Replace Part of URL

I have a Vimeo URL that looks like this:
<iframe src="https://player.vimeo.com/video/57418480?byline=0&portrait=0&autoplay=1" width="620" height="350" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
What I want to do is take the video ID, which in this case is 57418480 and replace it onclick. I would have the ID set via the class attribute. For example:
<li>Ethics in Investing</li>
Clicking the above link would replace just the number ID, so it would then look like this:
<iframe src="https://player.vimeo.com/video/57418481?byline=0&portrait=0&autoplay=1" width="620" height="350" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
Use data-url in your link
<li>Ethics in Investing</li>
onclick:
$('a').on('click',function(){
$('iframe').attr('src',$(this).data('url'));
});
$('a').click(function() {
var newID = $(this).attr('class');
var newURL = 'https://player.vimeo.com/video/' + newID + '?byline=0&portrait=0&autoplay=1';
$('iframe').attr('src',newURL);
return false;
});
http://jsfiddle.net/Khpd7/

Video carousel with carouFredSel

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.

Categories