I'm trying to perform an action on the 'ended' event on my embeded vimeo clip. This is not firing because, according to vimeo documentation, video is on loop. So I tried adding loop=0 to the url but it doesn't seem to be doing anything.
<body>
<iframe src="https://player.vimeo.com/video/717499153?muted=1&controls=0&autoplay=1&loop=0" width="240" height="320" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen="" title="video" data-ready="true"></iframe>
</body>
Is that some sort of rule for autoplayed embeds? How can I force it to play just once?
You have to add also background=1 as documented here :
https://developer.vimeo.com/api/oembed/videos
background - false -
For videos on a Vimeo Plus account or higher: whether to hide all video controls, loop the video automatically, enable autoplay, and mute the video. The loop and autoplay behaviors can't be overridden, but the mute behavior can be; see the muted argument below.
This is the correct URL :
<iframe src="https://player.vimeo.com/video/717499153?muted=1&controls=0&autoplay=1&background=1&loop=0" width="240" height="320" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen="" title="video" data-ready="true"></iframe>
I do recommend next time to contact Vimeo Support to help with this,
Have a nice day
Related
The YouTube videos are embedded in the SVG code using the foreignObject element with an iframe. The problem is that the video keeps playing when another is selected to play. I would like for the current video playing to stop when another starts to play. I would be better so the user of the site does not have to go back and forth to stop playing videos that they previously played. I have tried the stopVideo and pauseVideo functions but they don't seem to work.
THIS IS THE CURRENT FUNCTION BEING USED TO HIDE THE VIDEO PLAYER WHEN ANOTHER LINK(TAG) IS CLICKED TO OPEN UP ANOTHER YOUTUBE VIDEO, ALLOWING THE USER TO WATCH THE VIDEO AND HIDE THE PREVIOUS ONE. I WOULD LIKE FOR THE PREVIOUS VIDEO TO STOP PLAYING WHEN THIS EVENT HAPPENS.
<script type="text/javascript">
<![CDATA[
var id = 'name';
function place(id) {
var gs = document.getElementsByClassName("textboxes");
// Hide all the elements
for (var i = 0; i < gs.length; i++) {
gs[i].classList.add("hidden");
}
// But make sure the one with "id" is visible
document.getElementById(id).classList.remove("hidden");
}
]]>
</script>
<script>
function reset() {
document.getElementById("introinfo").classList.remove("hidden");
document.getElementById("textboxes").classList.add("hidden");
}
</script>
THIS IS HOW THE YOUTUBE VIDEOS ARE EMBEDDED IN THE SVG CODE
<g id="introinfo" class="textboxes">
<rect id="info-box" x="1676.49" y="35.62" class="st611" width="1292.93" height="715"/>
<foreignobject x="1676" y="35" width="1292" height="715">
<div style="margin-bottom: 0px; padding-bottom: 0px;"><iframe class="youtube-video" width="1292" height="575" xmlns="http://www.w3.org/1999/xhtml" src="https://www.youtube.com/embed/********wmode=opaque&enablejsapi=1&version=3" allowscriptaccess="always" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
</foreignobject>
</g>
I am currently working on a chrome extention for youtube and I want to disable the option for the user to pause/play the video by clicking on it.
I saw some posts that say "video.off('click');" but it dosent work.
I tried this one also :
video.addEventListener('click', function(event){
console.log("preventing?")
event.preventDefault();
});
but still it doesn't do nothing.
I would love some help if possible - Thank you all in advance!
Edit:
I saw the comments and I want to sharpen my question. I need a solution to disabling just the click event to stop the play/pause from there.
I also need the answer to be written in a javascript file because I want to control whether or not the user can click on the video.
I've also looked in: Javascript code for disabling mouse click for youtube videos but I haven't managed to find a corrent solution to my spesific question. I saw one solution that recommend to add a transparent overlay on top of the video element but I have no idea how to do so and how to make it resize as the video player itself resizes
Attach a click listener on window + use the capture phase by specifying true for the third parameter of addEventListener + use stopPropagation, so that your listener will be the first target in the event propagation chain i.e. it'll run before the site's handlers because sites usually don't use the capture phase.
window.addEventListener('click', event => {
if (event.target.matches('video')) {
event.stopPropagation();
}
}, true);
Note that if some rare site uses the exact same trick, you can still override it by declaring your content script with "run_at": "document_start".
I noticed that some websites showing youtube videos put a transparent overlay on top of the player so that the users cannot click on the "Open in YouTube" icon. This might help you too, even if it might still be able to give focus to the controls using the keyboard.
You can check both the implementations here: https://stackblitz.com/edit/web-platform-4oehg4?file=index.html ( SO snippet can't embed yt iframe videos )
// HTML
<div class="container">
<iframe
id="video2"
width="100%"
height="100%"
src="https://www.youtube.com/embed/LcGRpsD6yuk?controls=0?mute=1&autoplay=1"
title="YouTube video player"
frameborder="0"
allow="accelerometer; mute; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture;"
></iframe>
<div class="overlay"></div>
</div>
// CSS
.container {
position: relative;
width: 100%;
height: 50%;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Using CSS Only:
// HTML
<iframe
width="100%"
height="50%"
id="video"
src="https://www.youtube.com/embed/LcGRpsD6yuk?controls=0?mute=1&autoplay=1"
title="YouTube video player"
frameborder="0"
allow="accelerometer; mute; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture;"
></iframe>
// CSS
#video {
pointer-events: none;
}
I am calling a loop to generate a list of link of youtube embedded video. When I click on any of the links, the related video is opened in iFrame. But the problem is, when I first load the page, it does not shows any video in an iFrame nor even the iFrame. I need to click on a link to load a video. I want to load the first video of the list automatically when I load the page.
iFrame of the video:
<h4 id="videoTitle"></h4>
<div class="embed-responsive embed-responsive-16by9">
<iframe id="frame" name="frame" width="560" height="315" src="about:blank" frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
</div>
This is the loop to generate list of videos, I am using laravel, so this is how the code looks like:
#foreach($topic->videos as $video)
<li>
Play Video
</li>
#endforeach
Here is my jQuery code:
<script>
$('.ytLink').on('click', function (e) {
$('#frame')[0].src = $(this).attr('href') + '?autoplay=1';
e.preventDefault();
$('#videoTitle').text($(this).text());
});
</script>
Can anyone help me how to load the first video automatically?
I triggered a click on your first link when the document is loaded.
I use the $(document).ready() function to get your code execute when the document is loaded and ready to use.
I pasted your code inside this function. After I find your first link with $('.ytLink').eq(0) then I use the .trigger('click') on this element. So this trigger will run when the document is loaded.
More info about the .eq() function.
And more info about the .ready() function.
$(document).ready(function() {
$('.ytLink').on('click', function (e) {
$('#frame')[0].src = $(this).attr('href') + '?autoplay=1';
e.preventDefault();
$('#videoTitle').text($(this).text());
});
$('.ytLink').eq(0).trigger('click');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h4 id="videoTitle"></h4>
<div class="embed-responsive embed-responsive-16by9">
<iframe id="frame" name="frame" width="560" height="315" src="about:blank" frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
</div>
<li>
Play Video
</li>
<li>
Play Video
</li>
<li>
Play Video
</li>
I'm embedding a youtube video in the HTML with the following code
<iframe width="560" height="315"
src="https://www.youtube.com/embed/7MqMyoxMaW4?controls=0&modestbranding=0" frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
I'm trying to hide/disable the context menu inside the video. to avoid copy video link.
I was going through API documentation, still couldn't find result.
How can achieve this?
fiddle link: https://jsfiddle.net/us9rev0b/
This is one type of patch but we can hide it by following pure JavaScript
For hide watch later
document.getElementsByClassName("ytp-watch-later-button ytp-button ytp-show-watch-later-title")[0].style.display = 'none'
and For share button
document.getElementsByClassName("ytp-button ytp-share-button ytp-share-button-visible ytp-show-share-title")[0].style.display = 'none'
Im trying to add youtube video in my webpage using below mentioned code, is
there anyone who can help me with that.? have a look on my code below.
<div style="width:400px; height:200px;">
<embed src="https://www.youtube.com/watch?v=Q-AV9KMLTFc" wmode="transparent"
type="application/x-shockwave-flash" width="100%" height="100%"
allowfullscreen="true" title="Adobe Flash Player">
</div>
Use the code that Youtube generates for you after clicking share > embed. It looks like this:
<iframe width="560" height="315" src="https://www.youtube.com/embed/Q-AV9KMLTFc" frameborder="0" allowfullscreen></iframe>
Set width and height to whatever values you like.
You could do it with <iframe> like this:
<iframe width="500" height="500"
src="https://www.youtube.com/embed/vEROU2XtPR8">
</iframe>
With Autoplay:
<iframe width="500" height="500"
src="https://www.youtube.com/embed/vEROU2XtPR8?autoplay=1">
</iframe>
Note: After "embed/" in src, be sure to write the correct youtube video id which can be found in the URL link after "=" symbol.
Ex: In this link, https://www.youtube.com/watch?v=vEROU2XtPR8
Youtube video id="vEROU2XtPR8".
Be sure to give the width and height properties of the video size that should be displayed on the screen.