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>
Related
First of all I'm a total noob so code might be harsh.
With that said, I have a page with several images (thumbnails) that I want to make clickable so that they enlarge and display their own embedded YouTube video. I use Magnific Pop-Up for the aesthetic of the whole thing.
I succeeded in doing exactly what I want but it obviously only works for one source, so I'd like to know what's the best way to have a unique script targetting several sources (depending on the clicked item)?
Here's an example (all sensitive values are redacted for privacy reasons):
$('.container').on('click', function () {
$.magnificPopup.open({
items: {
src: '<iframe width="560" height="315" src="https://www.youtube.com/embed/video-url" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>',
type: 'iframe'
}
});
});
<div class="container">
<img src="thumbnail.jpg" alt="Video 1">
<a target="_blank" rel="noopener noreferrer">
<div class="overlay"></div>
</div>
The iframe is in the script because otherwise it'd clearly display both the images and the embedded players in an unordoned manner, and I want the embedded player to stay hidden unless an image is clicked, only then the popup opens and display the YouTube player.
Thanks in advance for your help!
EDIT: Each image matches a single embedded video, on click it's not supposed to play a random video, only the corresponding one.
For creating one image for one video and specific url, you also need a div for each of them.
Here, I have created an array of objects in javascript named links, which contains all the information about each video and It'll append that to the main div, content.
In simple words:
I created an array named links which contains objects, with information about each video:
var links = [{
thumbnail: "thumbnail.jpg",
url: "url",
alt: "alt"
}, {
thumbnail: "thumbnail2",
url: "url2",
alt: "alt2"
}]
I created a parent div, which'll contain all images, <div id="content"></div>.
Using for loop and jquery(.append property), I added elements in parent div with unique Id for each, to access it later:
//access each element of links array one by one
for (var i = 0; i < links.length; i++) {
//"id=${i}" is unique id for each div, it also matches with specific element in array.
//For ex: 2nd element of array will get "id=1"...
$('#content').append(`<div class="container" id="${i}">
<img src="${links[i].thumbnail}" alt="${links[i].alt}">
<a target="_blank" rel="noopener noreferrer">
<div class="overlay"></div>
</div>`);
}
Whenever any element with "container" class is clicked, it'll get the id of the element using var id = $(this).attr('id'); and open link using "magnificpopup" for the div of specific Id:
$.magnificPopup.open({
items: {
src: `<iframe width="560" height="315" src="${links[id].url}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>`,
type: 'iframe'
}
});
Note: Here, links[id].url is url of element with specific Id, which we had assigned to each element while creating it in step 3. Since, we had assigned the Id according to the number of element, like 2nd element as id 1, we directly accessed it here using its position in array.
Final code:
var links = [{
thumbnail: "thumbnail.jpg",
url: "https://www.youtube.com/embed/video-url-1",
alt: "Video 1"
}, {
thumbnail: "thumbnail-2.jpg",
url: "https://www.youtube.com/embed/video-url-2",
alt: "Video 2"
}, {
thumbnail: "thumbnail-3.jpg",
url: "https://www.youtube.com/embed/video-url-3",
alt: "Video 3"
}]
for (var i = 0; i < links.length; i++) {
$('#content').append(`<div class="container" id="${i}">
<img src="${links[i].thumbnail}" alt="${links[i].alt}">
<a target="_blank" rel="noopener noreferrer">
<div class="overlay"></div>
</div>`);
}
$('.container').on('click', function() {
var id = $(this).attr('id');
$.magnificPopup.open({
items: {
src: `<iframe width="560" height="315" src="${links[id].url}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>`,
type: 'iframe'
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="content"></div>
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>
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>
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")
}
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/