We Keep Coding

Youtube embeded code is validation using Regex in Javascript or Jquery - javascript

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")
}

Related

This is the iframe where I want to implement the auto-scrolling feature.<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fpage_name%2F&tabs=timeline&width=500&height=500&small_header=true&adapt_container_width=true&hide_cover=true&show_facepile=true&appId=---" width="500" height="400" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>

<iframe id="preview" onLoad="scrollToBottom()"></iframe>
function scrollToBottom() {
window.scrollTo(0, document.body.scrollHeight);
}
$('#preview').contents().scrollTop($('#preview').contents().height());

I was trying to append an Iframe embed to a div element using javascript but I'm getting an error when trying to append it using innerHtml. Is there any way to append an Iframe in a div using javascript. My current code is attached below. Thanks in advance.
function addCode() {
document.getElementById("add_to_me").innerHTML +=
"<iframe width="
1263 " height="
480 " src="
https: //www.youtube.com/embed/zogtwLQQEfY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>";
}
<div id="add_to_me">
<h3> Heading</h3>
<!--embed Iframe here-->
</div>

The string contains attributes that are wrapped with double quotes - ". Wrap the entire string with single quotes - '.
document.getElementById("add_to_me").innerHTML +=
'<iframe width="1263" height="480" src="https://www.youtube.com/embed/zogtwLQQEfY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>';
<div id="add_to_me">
<h3> Heading</h3>
<!--embed Iframe here-->
</div>

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'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>

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&gt';
$('#elem').html(s)
http://jsfiddle.net/4tW2u/3/