I'd like to click on an embedded youtube video using javascript (so the video plays automatically). I successfully simulated a click on a <div> like this:
function f(){
alert("hello");
}
<div id="someid" onmouseup="f();">
my text
</d>
document.getElementById("someid").onmouseup();
How can the above code be adapted to work with an embedded youtube video?
Just add &autoplay=1 to the link of the video in the <embed> tag.
If he does what you suggest the views on the embedded video won't count. I'm pretty sure he is asking his question because he is trying to find a way to get the video to autoplay and have youtube count the views at the same time.
Related
I want to embed a youtube video on my own website and I want this youtube video not to be skipped in any way, but not to adjust its speed and to track the time it watches, but I could not find any source.
I tried to use the youtube iframe api, but I can't follow the stats without stopping or starting the youtube video there.
I would suggest that you should first download the video, and then put it onto your site through a <video> tag. The youtube iframe api is designed only for having videos that function exactly like they do on the youtube website, which includes the things you don't want.
I am needing to download a video that is sourced from an HTML5 element. The issue is that I want the download button to be more visible.
<video controls disablepictureinpicture>
<source src="https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mp4-file.mp4">
</video>
<a href="https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mp4-file.mp4" download>
Download Video (not functional)
</a>
This code provides two download buttons.
One hidden in the button menu of the HTML5 Video Player.
Another attempted in the <a>tag.
The <a> tag navigates instead of downloads because of CORS.
Problem:
Is it possible for me to modify the <video> tag to make the download button immediately visible without having to download via the player's menu button?
Or for some javascript to click the download button from the media player?
I think you should create your custom video player UI, instead of modifying the video tag UI which is impossible as far as I know.
maybe you can try this third-part lib video.js
live demo
https://codepen.io/xgqfrms/pen/jOYKWPe
I am building one of my first webpages and am very novice when it comes to any custom html, js, css, etc. I'm building the site in Squarespace on the Alex template. My goal is to have a lightbox that opens from a text link and plays a youtbe video. Currently, I am able to get the text link to open a lightbox (featherlight) and play a youtube video (iframe embed), but then I run into 2 problems.
1. The audio for the video plays twice
2. when I close the light box, one set of the audio keeps playing.
I am totally lost here and have scoured trying to find a solution. Here's what I have:
<a id='open_lightbox' data-featherlight='.lightbox_content' href='#'>open lightbox</a>
<div style="display:none;">
<div class='lightbox_content'id=ytplayer>
<iframe id="video1" width="1280" height="720" src="https://www.youtube.com/embed/g7fbe-oV-X0?rel=0&enablejsapi=1&playerapiid=ytplayer" frameborder="0" allowfullscreen></iframe>
<script>
$("#open_lightbox").click(function(){
$("#video1")[0].src += "&autoplay=1";
ev.preventDefault();
});
</script>
</div>
</div>
A lot of this is taken from different posts, but I haven't found anything that works. This is the last bit I had worked out that gets the video to play, but I don't know how to stop it, or why there are two audio instances running. Any help is appreciated.
Try this:
$('.#open_lightbox').on('click', function(ev) {
setTimeout(function() {
$("#video1")[0].src += "&autoplay=1";
},150);
//ev.preventDefault();
});
The way you do it used to work - I just had to use the trick again and faced the same problems. Adding a small delay and remove the preventDefault() worked for me.
You might need to put a more specific jQuery selector for the "#video1" so it isn't auto-playing two videos.
I'm trying to embed some YouTube videos in a website in a form of a playlist. I want them to play as a playlist, looping all the videos without waiting time in between.
So far I have this:
<iframe src="https://www.youtube.com/embed/WTybilbbFqw?autoplay=1&loop=1&playlist=PMIhuOOMLXs,yV8qytGjsFc,WTybilbbFqw"></iframe>
You need to include rel=0 into the line.
Like this
<iframe src="https://www.youtube.com/embed/WTybilbbFqw?autoplay=1&loop=1&rel=0&playlist=PMIhuOOMLXs,yV8qytGjsFc,WTybilbbFqw"></iframe>
As a standard thing, the video will reset. If rel = 1 which is default, then the video is stopped/paused to display the related video list..
Problem
I'm working with a site where the developer coded an embedded youtube video to change via a script altering the iframe's src tag.
I need to mute this element, and while I'm aware that a few libraries allow me to embed a video via script with the option of muting, I'm unaware of any way to use those methods without having to rescript everything that has been done on the youtube player. What's the best option here?
element
<iframe id="tv" width="100%" height="100%" src="http://www.youtube.com/embed/9NFUgVa68hw?autoplay=1&rel=0&controls=0&showinfo=0&disablekb=1&iv_load_policy=3&modestbranding=1" frameborder="0" allowfullscreen></iframe>
script
var channel1 = "http://www.youtube.com/embed/dFU6Cy4Hd5A?autoplay=1&rel=0&controls=0&showinfo=0&disablekb=1&iv_load_policy=3&modestbranding=1";
$("#channel-1").click(function(){
$("#tv").attr("src", channel1);
$(".mid-bar").text("TNT");
});
The above is just one module of the script; there are 22 channels.
Again, I'm trying to mute the embedded video without having to rescript the src changes. How can this be done?
I understand you don't wish to change the src, however, if you append enablejsapi=1 you can then use javascript to mute the video by calling object.mute()
Reference: https://developers.google.com/youtube/js_api_reference#Playback_controls