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