How to customize the way your site appears in an iframe - javascript

I noticed that when you embed sites like Youtube.com and Streamble.com, only the video appears in the iframe. How do they do that? Shouldn't an iframe load the whole webpage?
What I've tried:
Initially I thought you're supposed to wrap the mp4 file in og:video tags, but that didn't work.

How do they do that? By only serving up the video. Look at the url in the src attribute on the iframe. Load it up on a browser (you'll need to add http to the front of it) and you'll get only the video content.

Related

How can I capture and stream video of an iframe?

On a website I have an iframe that loads my game (from another domain), I would like to capture and stream it. How can I achieve this? just the contents of this iframe as the user interact with it, not the entire screen or page.
Here's what I tried:
using getDisplayMedia() from Chromium/Mozilla browser api,
adding feature-policy: to the HTTP header and allow attribute is what I thought would do the trick but what happened is that it just allows you to use the Screen Capture API which does not seem to support capturing the iframe contents as video.
second, I tried using iframe has allow='displaycapture' but when I call getDisplayUserMedia() the iframe does not show up.
My last ditched desperate attempt is a browser extension that can capture the iframe contents somehow as video stream but that seems tough since its not like the iframe screen output is being streamed as a binary somewhere deep inside the chromium engine.

hide html attribute in inspection browsers

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.

Changing the src of an iframe with JavaScript

I want to have an embedded Youtube video and when I click on an tag, it changes the iframe scr to an other Youtube video. The page should not reload completely, only the iframe if needed and the src it must be able to change again by clicking a different link.
Please help if possible!
You use a normal link, but its target attribute is the ID of the <iframe> you want to load it into. Example:
Page 1
Page 2
<iframe name="myframe" id="myframe"></iframe>
Of course, you will need to know the ID of the frame (if it has one) and how to format the link to insert.

How to click iframe element in wordpress (all pages)?

I have a wordpress website, where I have pages with artists. This is an example: http://chasefetti.paradigmrecordsinc.com/ of a page from my website
On the top I have an iframe from arena.com
I want after the page loads to click the play button.
If I do it on the arenas page http://arena.com/artist/chasefetti like this (using firebug):
document.getElementsByClassName("fg icon-play-fg")[0].click()
it works, but on my website I guess it doesn't know about accessing the iframe.
How can I specify to access that iframe ?
Also the full mission that I gotta do is to play that button for each page. I am thinking to add a jquery that does what I want to do, to the templates page.
My main problem is accessing that element from the iframe
As far as I know(I tired it once) you can't do that, unless the source of the iframe is on the same site as yours, which isn't the case here.
Also check this same-origin policy.

Swapping between youtube embeds with image hyperlink clicks?

Here's what I'm trying to do. I have a bunch of thumbnails on a page and each one links to a page which has a youtube video embedded on it (so it's like a playlist). I was thinking it would be possible to simply swap out the current youtube embed rather than having it load an entirely new page.
The youtube embeds are iframes, so I'd need a way of, when clicking an image (I'm guessing javascript onclick might be the best solution) then have it change the current iframe to something else. I can do this linking to the pages which have the youtube embed, but I'd like to do it without needing to load a page - just grab some html and plug it in the iframe spot.
Any ideas?
You don't need to use javascript to load something into an iframe. You can add a name attribute to your iframe and then set the target of your link to that name. Something like this will work:
<iframe width="420" height="315" src="http://www.youtube.com/embed/zSgiXGELjbc" frameborder="0" allowfullscreen name="youtube_iframe"></iframe>
<p>load another video</p>
See a demo here: http://jsfiddle.net/q3Nas/

Categories