I have several YouTube videos embedded on a webpage. To be more specific, the page has one single iframe and links to several youtube videos - I use the target attribute to force these links to open within the iframe.
For users on mobile, I'd like the videos to open within the YouTube app (if they have it installed). This is the default behavior for YouTube links, however, it doesn't happen in my case because the links target the iframe so it just causes the video to embed on the page and then play within the browser.
My guess is the easiest way to do what I'm looking to do would be to use javascript to change the target attribute(s) just on mobile. However, I'm open to other ideas to achieve this as well.
Related
In my client website, when we play youtube videos in modal windows, they keep playing as we close the window.
Site: https://apoloi9.com.br. Each of the html list elements, where the videos and names are organized (as shown in the picture bellow), have unique id, but I couldn't find a way to make it work.
Section specified in this screenshot
You just have to empty or reload the src of the video embed. Therefore it would be stopped. Assuming you use JQuery:
$("#yourModal").on("hide",function(){
var video=$('.yourEmbed').attr("src");
$('.yourEmbed').attr("src",video);
});
These actions can also be achieved using plain Javascript.
i want to create a video learning site.
I want people can't get to download my videos.
how to hide element attribute in inspection browsers because people can't get the video URL in inspection browsers
how to disable download button in video element
You can't hide a HTML element from the browser. You could create a seperate website which host the video's but doesn't show the real link to the video (proxy website) and only allow the ip-address of the "front-end" website to access those videos.
It's simply not possible. It will be visible in the HTML source code anyways. Only server-side code won't appear in the page's source on client-side.
Sidenote: Even if you could hide the video tag or the video's URL in the source, the browser should download the video itself which can be found in Chrome (or other browser's) Developer Console.
Since YouTube has recently disabled the ability to hide related videos using the rel parameter, I am trying to get the clicked on related video and display it on the iframe instead of it opening it on a new tab and going to the official YouTube page.
I've tried injecting html code into the iframe html document to disable the target=_blank feature on the links but recently found out about the CORS problem.
Is there any way to grab the clicked link and display it on the iframe and remove the target=_blank option on the embeded iframe?
How can I show the same HTML5 YOUTUBE Video twice on a website without loading it twice?
Here you are taught to display a same html 5 video twice without having to load twice. But I want to know how to do it with a youtube video, using the IFRAME tag. The link is taught using the canvas, but I can not do the same with the iframe. Can you duplicate the video even with the iframe? Or is there a way to "catch" the iframe video tag? (I've tried, but it has an "access denied" error). This might help, too.
This is just an example, but I wanted to do something like this:
Original youtube video.png
My "site" with 1 youtube video and several canvas.png
I wanted to take this video is to post several in my site, enabling multiple simultaneous playbacks. As this would take a lot of the internet, I wanted to get the current frame of the original video simultaneously and place them on several canvases, this link teaches you to do just that, but using videos (< video> tag). I want to do this using youtube videos.
I want all players to play / pause at the same time, as if they were copying each other
You can't.
At least, not legitimately. There is no provision in the YouTube Iframe API for granting you access to the underlying video element.
I have a quite specific issue regarding Chrome's new feature where they stop autoplaying videos.
On our site we wanted the page to load as quickly as possible, so only insert a new Vimeo embed object when a user has chosen to click to watch a video. Eg. the showreel on our homepage:
https://www.splinter.co.uk/
The problem arises because we use our own custom play button, so Chrome doesn't recognise that as a user-interaction, so it doesn't think that the user has chosen to view the video, therefore it blocks the autoplay option (which works fine in Safari).
I wondered if anyone else has had this problem, and if anyone can think of a workaround?
Thanks!
On the VOD home page of Vimeo you can find a technique that is used for a case like this. https://vimeo.com/ondemand
You can preload the Vimeo player when the user hovers over your custom play button so that at the time they click the Vimeo player.js API can be used to initiate playback. player.play()
If that is not sufficient it might be needed to load the player on page load and just keep it hidden, on the button press reveal the player and use the API to initiate playback.