Embed YouTube video quickly by pasting URL into webpage? - javascript

I am watching football videos and collecting data, I have set up a webpage that plays the video in the middle of the screen while I click scroll buttons of different aspect of the game, at the end I submit the data into a database.
At the moment I am just pasting the URL into the code and refreshing the page.
I want an easy way to paste an embed URL into a text box in the same webpage and the video will load in the iframe automatically (without the need to click a submit button, something like onpaste function, if it exists), I assume some javascript may need to be used.
I don't want to go away from the page (even for a few seconds - the task is tedious enough), I have a list of games I want to watch and with URLs ready to be pasted.
Is there a way to do this?
Edits
1. This is a typical URL with the iframe info
<iframe width="950" height="534" src="https://www.youtube.com/embed/xouOxFziuIk" frameborder="0" allowfullscreen></iframe>
also I am not experienced with Javascript so I have not tried anything.
The iframe (because of the way the page is set up) is inside a form tag

Related

Is there a way to allow automatic audio playback (alarm website)

I am creating a website that alerts when certain events happen with an audible alert. Since the arrival of chrome 66 it is not possible to play audio without the user making a gesture. For me this is a big problem, I was searching but I did not find any solid solution.
For example Youtube. When entering a link in the browser, the video starts automatically, without any user gesture. How do they do it?
It also occurred to me to ask for permission for the browser to allow automatic audio playback. Something like: "Notification.requestPermission ()". But I couldn't find how
When you navigate to a YouTube video link within YouTube itself, it doesn't actually navigate to a new page. YouTube uses a library called Structured Page Fragments (SPF) to render only relevant parts that need to be changed. Because of this, the browser doesn't consider this as a newly navigated page, and allows YouTube to automatically play videos with audio.
For example, from the Homepage, when you click a video in the Subscription box, this counts as a user interaction. The page then loads the fragments required to watch the video using SPF and - because the user is in the same navigation context as far as the browser is concerned - plays the video automatically with audio.
However, if you load the same video in a new navigation context (such as using a link from an external site, or opening it directly in a new tab) users will still need to interact with the page - in this case by clicking the video - to get audio. Once this is done, because the user has now interacted with the page and other videos are dynamically loaded using SPF, further interaction is not required for other videos to play automatically with audio in that navigation context.
Note that you don't need to specifically use SPF to achieve this effect. You can use libraries such as Angular and Vue to change views with a click event, and these should still count as the user having interacted with the page.

Prevent iframe to reload

I have a WYSIWYG editor (Tinymce).
I use Vue.js 1 to show a preview of the editor contents real-time. If a user types in the editor, the preview updates real-time as expected. But here is a problem.
If there is an iframe tag (Youtube video) in the preview, the video content tries to send a request to Youtube to reload as a user starts typing because the preview updates real-time. If there is only 1 video(iframe) it's ok but if there're 2 or 3 videos it gets really heavy and slow since multiple videos try to reload by themselves.
So, is there any way to make them stop sending a request to Youtube to reload when the editor contents update real-time?

How can i disable left-click / outgoing links on embedded videos within an iframe?

I embed videos, such as from YouTube and Daily Motion on my website. I'm wondering -- is there a way to disable all outgoing links from the video itself? Perhaps I can call the video iframe's id?
I know that if it were a flash video -- I could use
allownetworking="internal"
I came across how to disable right click within an iFrame (How to disable Right click inside the Iframe) that's on the same domain with jQuery -- perhaps I can use PHP curl to get the frame contents, iframe it and use some JS to disable left clicking/outgoing links?

Issue with JavaScript, Replacing an iframe's src, and the back button

I am working on a pop out for videos on a website I am doing some development work for. The idea is to click on a thumbnail of the video and then the video pop's off the page. Like how facebook works with their image viewer. I currently have a div tag with it's CSS display attribute set to hidden and an iframe with no src. When a user clicks on the thumbnail for the video I have JavaScript load the appropriate youtube embed link into iframe by this method:
document.getElementById('iframe-id').src = "http://www.youtube.com/embed/(videoID)";
The video is set to automatically start playing. When a user exits the popped off content the src of the iframe is then set to "" by the same method. It works fine, and the video is no longer in the iframe. The issue is with the back button.
Here is my process leading to my problem:
I click on the thumbnail and the
video pops off and starts playing.
I close the popped off content.
I press the back button.
The video I popped off previously is playing in the background. (The Problem)
Here is what I know of the process that is happening:
The page that is being viewed has two
instances created back to back in the
history of a browser. (ie I press the
back button and I am on the same page
still.. this is also when the video
starts playing in particular
browsers)
When I leave the popped off content
open and press the back button I see
just an empty iframe.
I believe my issue lies in the fact that I am changing the src to the iframe. The process of that seems to be causing the browser to load the page again and create a second instance of the same page in the history (where reloading a page does not). When the back button is pressed the page goes to the previous instance, but depending on the browser the hidden iframe is not always empty and the video is playing.
My question(s):
Can this issue be resolved with
JavaScript?
If it can't what could accomplish the task I am trying with out the issue creating two seperate instances of the same page? I was thinking AJAX might be the solution, but I don't know. I am still a little new to this all.
This can be resolved within javascript.
Additionally, AJAX has nothing to do with the problem you're having. AJAX is a mechanism for moving data around, not manipulating HTML documents.
If you just need to display a video, you don't need to use an iframe to do so. I'd suggest keeping a hidden div somewhere on the page and use that as a container for your video pop-up. When you need to display a video, insert whatever HTML you need to get it working into the div and display it when it's ready.

Opening a new iframe lightbox of .mov movie from within a flash object, possible?

I have a few Flash objects in my html page, and all these Flash objects respond to mouseOver and mouseOut.
On mouseOver, the Flash objects will play a movieclip in place.
On MouseEvent.CLICK, I would like the Flash objects to make the html page create a new iFrame with embedded .mov movie file in a lightbox effect.
I can't seem to get it to work.
I have tried ExternalInterface.call(), navigatetoURL(), I have tried simulating a click event in javascript.
Essentially, I want a mouse-click that is captured in Flash to open a jquery/javascript-lightbox in an iframe.
Thanks for any suggestion.
You should be able to do this using ExternalInterface.call().
However, calls to the external API only work if you set the right value for allowScriptAccess in your HTML object/embed tags. Be sure to set allowScriptAccess="sameDomain" or allowScriptAccess="always".
Try to call a function containing a simple JavaScript alert first, so you know it's working, before you implement your functionality.

Categories

Resources