-1

I'm currently building a website using Python flask that shows an embedded video in an iframe. I'd like to add a timer on the website that shows the current time elapsed and the two should be in sync (e.g. when a visitor pauses the video, the timer should also pause).

So currently I have something like this in my flask app:

@app.route('/')
def home():

    return """
    <h1>Hello world, check out this video:</h1>
    <iframe src="https://www.bbc.com/ideas/videos/a-love-letter-to-trees/p076rn7c/player" width="500" height="440" scrolling="no" style="overflow: hidden" allowfullscreen frameborder="0">
    </iframe>    
    """

I'm finding it difficult to access the elements in the iframe. After some searching and stumbling across something called the same-origin policy, it seems that it's not possible to read or edit contents of an iframe unless you are from the same origin (although some say you can use python requests + beautifulsoup which adds to the confusion somewhat).

Given my trouble with iframes, I started to think whether this was possible without using iframes. If I hosted my site locally, I could use Chrome to look into the iframe and find the src of the video. Instead of using iframe, I can then directly use <video> in my flask code and refer the src to the one I just found.

This worked and I thought I was making progress but after some time returning to my website, I noticed the video no longer worked and my guess is the src that I grabbed from the iframe is only valid for a certain time. This leads me to think that using <video> directly is not the right way to go about it (or even discouraged by the website that hosts the video).

Is my goal of having a synced timer possible?

3
  • Could you describe your project a little bit? Are you working specifically with the BBC embed player, or generally with video in an iframe? Would it be possible for you to switch to a video service that has an API, like YouTube or Vimeo? What you are describing will definitely be difficult (if not impossible) to do with your setup, and quite possibly not worth the effort.
    – corvidism
    Commented Apr 22, 2019 at 13:52
  • Thanks for your reply. I’m aware that YouTube has an API but I’m interested in working with general videos that can be found over the internet which in a lot of cases don’t have an API. I’m interested in the reason you say it’s difficult. Is it because I can’t look into the contents of the iframe? If so, I’ve been wondering how the dev tool in Chrome does it and also whether the possibility of using <video> instead of <iframe>
    – Wundingle
    Commented Apr 23, 2019 at 12:09
  • alright, I wrote an answer with some explanation and links to MDN so you can read up on it. As for Dev tools, they have access everywhere because they're a part of the browser - I'd say most security measures don't apply to them.
    – corvidism
    Commented Apr 24, 2019 at 15:14

1 Answer 1

0

It is not possible to get information about an iframed page on a different domain using JavaScript running in the parent page, because of the mentioned Same-origin Policy. This is a security feature - if this were possible, it would be trivial to construe a phishing attack to capture login information for online banking by opening it in an iframe and reading the entered password, for example.

There are ways to communicate with a page within an iframe, such as the Window.postMessage() API, but for that to work the embedded page must cooperate, i.e. listen for messages and do whatever you're asking.

Using <video> would get around this problem, but the majority suppliers/publishers of video you can find on the internet don't want this to be done - sometimes directly disallowing it in their Terms of Use, such as the BBC embed in your example ("the embed code mustn't be altered in any way"). Other times the video url will be blocked for embedding, temporary, or just plain undependable.

The right way to achieve what you're describing (video in an embed player with synchronized timer) would be to use an API provided by the video supplier.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.