Play video in a seperate div on link click - javascript

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>

Related

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 use the same iframe script with multiple sources?

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>

How to append Iframe in div using javascript

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

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

Categories