We Keep Coding

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

How to add YouTube embed (iframe) inside of divbox Javascript

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>

Youtube embeded code is validation using Regex in Javascript or Jquery

I need to validate an embedded code is valid or not. if anyone has an idea that how to check with regex. below code only check URL. but I want to check all string. The below code is not working.
var P = /^(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/
P.test('<iframe width="560" height="315" src="https://www.youtube.com/embed/_sWcXaic-bw" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>');
P variable only checks URL.
It's working
P.test('https://www.youtube.com/embed/_sWcXaic-bw');
but only check URL not the full tag is not working

I am trying this below code and it's working, but I don't know is valid or not. Please post if you have any valid solution for this.
var P = /^(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/
var content = '<p>'+'<iframe width="560" height="315" src="https://www.youtube.com/embed/_sWcXaic-bw" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>'+'</p>'
if($(content).find("iframe").length > 0){
var srccheck = $(content).find("iframe").attr("src")
if(P.test(srccheck)){
console.log("valid")
}else{
console.log("not valid")
}
}else{
console.log("not valid")
}

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/