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/
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
How would I be able to add a YouTube embedded iframe inside of a Divbox using a text inputfield, button to submit and javascript?
Thank you.
By taking "Divbox" to mean "div" I have made an attempt at an answer:
You could do the following if the user knows the video ID (the string of characters at the end of a youtube url):
document.getElementById("b").onclick = function(d) {
var full = '<iframe width="560" height="315" src="https://www.youtube.com/embed/' + document.getElementById("inp").value + '" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>'
document.getElementById("frame").innerHTML = full;
}
<button id="b">Go!</button>
<input id="inp" value="MPZI2M1fDi8"/>
<div id="frame"></div>
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
if a users types:
<iframe width="420" height="315" src="http://www.youtube.com/embed/8FozVVP72Qk" frameborder="0" allowfullscreen></iframe>
it becomes:
<iframe width="420" height="315" src="http://www.youtube.com/embed/8FozVVP72Qk" frameborder="0" allowfullscreen></iframe>
The code is shown instead of being interpreted.
So as long the nicedit documentation is old and not very complete, i thought i just replace those values,
I could use replace() function, but is there a function for this format conversion?
This is how i am getting the value:
$('body').on('submit','#new_blog',function(e){
e.preventDefault();
var textarea = $(this).find('textarea').val();
var valueWithIframeSupport = textarea.replace('<','<').replace('>','>');
/* This is what i had in mind but itdoesnt really seems an option*/
});
thanks
try html() method:
var s = '<iframe width="420" height="315" src="http://www.youtube.com/embed/8FozVVP72Qk" frameborder="0" allowfullscreen></iframe>';
$('#elem').html(s)
http://jsfiddle.net/4tW2u/3/