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
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>
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 have this code:
<a id="play-video" href="#">Play Video</a><br />
<iframe id="video" width="420" height="315" src="//www.youtube.com/embed/9B7te184ZpQ?rel=0" frameborder="0" allowfullscreen></iframe>
and then this jquery which plays the video:
$(document).ready(function() {
$('#play-video').on('click', function(ev) {
$("#video")[0].src += "&autoplay=1";
ev.preventDefault();
});
});
How can I modify the jquery:
$("#video")[0].src += "&autoplay=1";
So that it only plays the selected where I would have multiple iframes?
You can change your video id to another. Ex #video1, #video to control exactly what video you wanna play or wrap that button and video in a div. Then change your code to
<div>
<a id="play-video" href="#">Play Video</a><br />
<iframe id="video" width="420" height="315" src="//www.youtube.com/embed/9B7te184ZpQ?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
And this
$().ready(function () {
$('.play-video').click(function () {
//alert($(this).parent().children('#video').attr(src));
$(this).parent().children('#video').attr('src', function () {
return this + "&autoplay=1";
});
});
});
Demo https://jsfiddle.net/minhthanh/acg8e7f1/
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