Iframe question...

Discussion in 'Web Design and Development' started by Perene, Oct 12, 2015.

  1. Perene, Oct 12, 2015
    Last edited: Oct 12, 2015

    Perene macrumors 6502

    Perene

    Joined:
    Jun 29, 2015
    Location:
    Netherealm
    #1
    Sorry if this is the wrong place to pose this question, anyway I appreciate your input on this...

    I uploaded a video to Google Drive;
    Created a blog in Blogspot;

    Then I inserted a code like this in one of my blog posts:

    Code:
    <iframe width="560" height="315" src="https://drive.google.com/file/d/846584654387634856344545/preview" frameborder="0" allowfullscreen="true"></iframe>
    1) When using my PC, I can go to fullscreen and select the video quality/subtitles (another button);

    2) When using Safari for iPAD, I can see the video quality/subtitles button, but can't go to fullscreen;

    3) >>>>> When using Mercury Browser for iPAD with user-agent "Safari (iPhone Mobile)", I can't see/use the video quality/subtitles button, but now I am able to go fullscreen;

    4) >>>>> Google Drive's app from Applestore can't use the video quality/subtitles button, but is also able to go fullscreen;

    5) >>>>>>> Puffin browser (app from Applestore) is able to use the video quality/subtitles button and go fullscreen. However I stopped using for good, for 2 reasons:

    - Video takes a lot of time to load. In Safari, it takes a couple of seconds. Using Puffin, over 10. Don't know why, but it looks like it's either my iPAD that is slow (4th gen, last iOS), or this is to be expected;

    - Even when the video is playing, it looks like playback is stuttering. I mean, not running smoothly, as the same browser does in the Youtube website. BTW, Puffin supports Flash, but until recently, this functionality was paid and lasted only a short time;

    **********

    My question is: why 2) is happening? Can it be fixed by using another CODE in my personal blog/website or I need to wait for future iOS updates? This is a major letdown.
     
  2. morespce54 macrumors 65816

    morespce54

    Joined:
    Apr 30, 2004
    Location:
    Around the World
    #2
    There is nothing (more) that you can add to your `iframe` tag. IFAIK, it basically all comes down to how each browser (engine) handle `iframe` tags. I guess you can't host the video on your web server, right? I you could, I would suggest to go with a `video` (html5) tag. Otherwise, you can try to upload it to Youtube (or Vimeo and al.) and get the code they provide you to embed it. From my experience, it usually makes life easier this way.

    Unfortunately, No iOS update will get everything fixed for you (except for the mobile Safari playback).

    "Video takes a lot of time to load" - that's the buffering. Some players (browsers engine wise) are set to play the video quicker than other. Google Drive speed might also be involved here.
    "Even when the video is playing, it looks like playback is stuttering" - Youtube videos (playing in HTML5 of Flash) are faster than any Google Drive/Dropbox/iCloud server. After all, that's their core business!

    Good luck
     
  3. Perene thread starter macrumors 6502

    Perene

    Joined:
    Jun 29, 2015
    Location:
    Netherealm
    #3
    OK, for the record I tried using the embed code from Youtube on my blog and watching on iPAD. I used another IFRAME code, exactly that Youtube sends us.

    This is what happened:

    http://s4.postimg.org/qtskq4okd/image.png

    As you can see, fullscreen works, and we are able to change between subtitles, only when going fullscreen. However, we can't see the resolution button and that subtitle button when not fullscreen.

    I noticed this is how it looks like is going to work with the iPhone user-agent in the Mercury browser for iPAD, with the difference that the subtitle is not being displayed.

    So, sadly this confirms that the Safari browser does support fullscreen. It's just that GOOGLE is somehow preventing this browser from working as it should, when it comes to Google Drive IFRAME. Apple is not to blame on this matter, from what I understand.

    I hope Google fixes this issue.
     
  4. Perene thread starter macrumors 6502

    Perene

    Joined:
    Jun 29, 2015
    Location:
    Netherealm
    #4
    I found a link I was looking for:

    Can I use... Support tables for HTML5, CSS3, etc
    Known issues

    What does it mean that it does not support fullscreen API?

    P.S. I tried adding subtitles to Internet Archive. It worked. But you aren't going to believe this... Fullscreen works in Safari for iPAD, and subtitles are displayed, but the moment you go fullscreen, they vanish!

    [​IMG]

    (Click to enlarge)

    What a piece of trash the iPAD is...

    P.S. For the record, a user from IPADFORUMS sent me these replies about the problem, clarifying a few things:

    And I mentioned that using YOUTUBE's iframe

    We can go fullscreen and read subtitles.

    However, we can't see the subtitle/resolution buttons.

    I think that proves my point that GOOGLE blocked Google-Drive embedding from going fullscreen on iPAD. However, other points raised above are making me confused.
     
  5. 960design macrumors 68000

    Joined:
    Apr 17, 2012
    Location:
    Destin, FL
    #5
    I'm sorry, too much rambling. Can we try one thing at a time? What are you having trouble with?

    I upload videos to my server all the time. Tap the preview poster (400x400) to get a preview (400x320) of the video running with controls displayed below the video. The controls allow you to pause/play, go fullscreen, control volume, and scrubbing.
     
  6. Perene, Oct 22, 2015
    Last edited: Oct 22, 2015

    Perene thread starter macrumors 6502

    Perene

    Joined:
    Jun 29, 2015
    Location:
    Netherealm
    #6
    Ok, let me try one thing at a time. I'll ask the questions and you will answer them, ok?

    1) Do you own an iPad?

    2) Do you know the iPad has multiple browsers, such as safari and chrome?

    3) Do you know we can watch videos in any of them?

    4) Do you own a blog or personal website?

    5) Do you know how to embed a video in them?

    6) Do you realize that if you copy and paste this code in your blog/website

    Code:
    <iframe src="https://drive.google.com/file/d/0B21fQyiIJBBnWms0S2UyaUFNeWM/preview" width="640" height="480"></iframe>
    And then, using safari/chrome/whatever browser from an iPad, you will see the embedded video, but won't be able to go fullscreen?

    7) Did you know that if you do the same and copy/paste the embedded code from an YouTube video, provided by the video's page, and then try to go fullscreen in the iPad, it will not only go fullscreen but display the subtitles, if available?

    8) Did you know that even if you manage to go fullscreen by changing the user-agent from an iPad browser to "iPhone" you will be unable to see subtitles and change the video's resolution? And doesn't that means that Google drive goes fullscreen in an iPhone but not in an iPad?

    9) Did you know that Google responded me multiple times and instead of acknowledging they have imposed this restriction, they can only give me the same responses, claiming it's all fine and I should complain to Apple, but they never used an iPad to investigate the issue?

    10) Do you understand that none of the aforementioned issues happen in a PC (personal computer)?

    11) Do you agree that any person who says everything is fine is either mocking or messing with me, making me wasting time stating they didn't even spend seconds trying to verify this issue? Or perhaps they might live in another planet and never heard of a tablet with a browser before?

    12) Have you noticed that if you copy the embedding code from internet archive's player and try to reproduce the video in an iPad, it will go fullscreen?

    13) Have you also noticed that while the internet archive player can go fullscreen and display subtitles just like YouTube, when going fullscreen in an iPad the subtitles vanish? So that you can only see them when not using the fullscreen mode? Isn't that another epic fail?

    14) When I noticed 13) I was beginning to think that safari/iPad needs to be improved by Apple. Then I went back to 7) and realized that YouTube was already displaying subtitles in fullscreen mode. Isn't that odd? Doesn't it screams that Apple is not to be blamed at all?

    15) Have you noticed that Google drive app available in Apple Store can go fullscreen when you visit your email accounts and click on your files, but does not display any subtitles added by you, to your videos, and can't change the video's resolution?

    P.S. Google sent me these emails, I read them for the first time minutes ago:

    P.S. 2 the feedback was sent to Google. It should be noted that if you are using an iPAD, you can't send a feedback by following this link: http://www.google.com/tools/feedback/intl/en/learnmore.html

    You won't be able to type any text to the box. I used a PC and sent it. I hope someone reads and fixes this issue.

    P.S. 3: Also added my comments here:
    https://code.google.com/a/google.com/p/apps-api-issues/issues/list?cursor=apps-api-issues:4112

    Please, if someone is reading this, send the same comments to Google, too, so that we may have this improvements one day.
     
  7. 960design macrumors 68000

    Joined:
    Apr 17, 2012
    Location:
    Destin, FL
    #7
    Yes, I manage over 4500 iPads. I write MDM software. Apple contacts me for assistance. Your condescending tone has ended my free assistance. Please contact my company for my consulting rates.
     
  8. Perene thread starter macrumors 6502

    Perene

    Joined:
    Jun 29, 2015
    Location:
    Netherealm
    #8
    My tone was rash because I got sick of explaining myself to several people and being misunderstood. I meant no disrespect, only that it gets on my nerves when I am wasting time to explain something and the reader isn't even checking to see what the problem is.

    This is Google's fault. Entirely.

    They updated the Google Drive app for iPAD and now it is able to play audio files.

    I hope they can at least allow this app to read subtitles, if they aren't willing to fix this for iPAD. I had high hopes of using the iPAD for my private Netflix (if you know what I mean), but now I find these plans have gone south. Kinda looks like the iPAD was released yesterday, for all these constraints to still be in place.
     
  9. Perene thread starter macrumors 6502

    Perene

    Joined:
    Jun 29, 2015
    Location:
    Netherealm
    #9
    I came across what can be definitely a solution for sending these Google Drive videos to fullscreen in iPAD: the use of the JWPLAYER to display them.

    http://helplogger.blogspot.com.br/2014/09/host-blogger-css-javascript-files-in-google-drive.html

    http://www.antifart.com/2014/02/06/...sted-setup-for-blogger-com-and-wordpress.html

    http://www.ilearnzone.net/2015/05/how-to-play-google-drive-hosted-media.html

    http://stackoverflow.com/questions/20924529/can-i-play-google-drive-videos-with-jw-player



    http://yen.ypworks.vn/2015/08/how-to-use-google-drive-as-host-of-media-files-for-jwplayer/

    Basically, we need to

    1) Create an account in JWPlayer's website, download the files for the free player (and write down our personal key);

    2) In Google Drive, create a public folder (shared with anyone) and upload these files (including the jwplayer.js) there;

    3) Edit the template of our blog and insert an entry like this:

    <script src='https://googledrive.com/host/THE PATH where the jwplayer.js file is' type='text/javascript'/>
    <script type='text/javascript'>jwplayer.key=OUR KEY;;/&gt;</script>

    4) Create a public folder, upload a file to it, copy the public link and create a new blog post with the proper codes to display it.

    I can't explain into details the steps 3 and 4, but these are simple. I haven't finished looking into this yet, because I am still looking if it's possible to do the same thing for MKV files. Based on this post, it looks like it is possible:

    http://support.jwplayer.com/customer/portal/questions/6062359-play-mkv-files

    The code I inserted in a blog post was this:

    **********
    <div id="mediaspaceaaaa">Loading the player…</div>
    <script type="text/javascript">
    jwplayer("mediaspaceaaaa").setup({
    file: "https://googledrive.com/host/PATHOFMYFOLDER/B.mp4",
    image: "http://mywebsiteexample.com/movies/aaaa.jpg",
    width: 640,
    height: 480
    });
    </script>
    **********

    And it worked, I was able to go fullscreen in iPAD for the first time, for a Google Drive content.

    However, there's a downside for this that explains another issue I was having: the inability of iPAD browsers to display subtitles in fullscreen mode.

    I thought this was deliberate from Internet Archive and/or Google Drive, however JWPlayer (and I.A. seems to be using their player) says this:

    http://support.jwplayer.com/customer/portal/articles/1407438-adding-closed-captions

    ******
    VTT captions are preferred, since they are part of the HTML5 standard. JW Player supports both formats across all browsers though, in both Flash and HTML5 mode. The only exception is playback in fullscreen on iOS, since the native fullscreen mode does not allow JW Player to print captions over the video. Since the iPhone can only display video in full screen, this means that sideloaded captions will not function on this device.
    ********

    I still haven't been able to add any subtitle in non-fullscreen mode, but once this has been made possible, plus the possibility of playing diverse files (not only MP4's), I'll let all of you know.

    My main goal was to play all of this in fullscreen mode with subtitles, however, if I can't do that, at least the fullscreen mode would be a huge achievement, meaning I won't have to use Google Drive app from Apple-Store everytime I want to play my files.

    And by doing so, I could ditch Internet Archive for streaming my videos, considering their servers are a bit slower than Google's and they have the same limitations, minus the fullscreen mode that is possible with I.A. embedded videos.
     
  10. 960design, Nov 28, 2015
    Last edited: Nov 28, 2015

    960design macrumors 68000

    Joined:
    Apr 17, 2012
    Location:
    Destin, FL
    #10
    Here is a very simple version of what I would recommend. Do not upload your video as AVI but use mp4. Then stream them directly with something like this. Ensure you are using an HTML5 doctype.
    Code:
    <video controls="controls">
      <source src="https://drive.google.com/uc?export=download&id=0B21fQyiIJBBnWms0S2UyaUFNeWM" type="video/mp4">
    </video>
    AVI is a very poor format for streaming.
     
  11. Perene thread starter macrumors 6502

    Perene

    Joined:
    Jun 29, 2015
    Location:
    Netherealm
    #11
    I was returning here to say exactly this: it seems JWPlayer does not accept MKVs, AVIs... only MP4, FLV and WEBM if I am not mistaken, so that means it ceased to be an option. Only a minority of my files have the .MP4 extension.

    About subtitles not being displayed in fullscreen mode in iOS, please read that discussion:
    http://support.jwplayer.com/customer/portal/questions/15926118-captions-in-fullscreen-mode-ios-

    I was beginning to think at least this could work, but sadly I faced the same problem I had with Internet Archive, which apparently uses JWPlayer: no subtitles were displayed in fullscreen mode. But the video in this page, just like Youtube, showed me subtitles in fullscreen mode in iOS:
    http://dev.powered-by-haiku.co.uk/solutions/jwioscaptions/

    I don't know what Youtube/this page did, but whatever they have done, it worked.

    So we are still unable to display Google Drive's contents in fullscreen when using browsers and also UNABLE to do that with subtitles appearing.

    None of this is a problem for PC users. Google must be filled with idiots to allow so many hindrances to be still in place for iOS users. Even Youtube can't go fullscreen in iPAD (when we are not embeding with iframe and watching from their own website), they must be forcing us to use their official app, which bothers us with ads now more than ever before.

    I even removed from my iPAD and downloaded a couple of others (one can download YT videos), to avoid so many ads (a few can't be skipped and last 15 seconds).

    What I don't understand is why Google Drive can't go fullscreen, since the app doesn't make any difference and doesn't show any ad for Google users. We should either blame iOS for being a pain in the @ss for all developers, or Google for not making necessary changes to turn our experience less painful in such devices.
     
  12. Perene thread starter macrumors 6502

    Perene

    Joined:
    Jun 29, 2015
    Location:
    Netherealm
    #12
    As you can see here:
    https://code.google.com/a/google.com/p/apps-api-issues/issues/detail?id=4111

    I opened this defect report and a project member (Ryan) replied, but later said this should be addressed in the Google Drive help forum. 10 people starred this issue, that's why it was prioritized.

    I already had a thread in the GD help forum:
    https://productforums.google.com/fo...;context-place=topicsearchin/drive/fullscreen

    And I have sent a feedback to Google about this. If you also want this to be done, experiment sending a feedback about the issue or reply in this thread to show you are interested about seeing this becoming a reality.

    ********
    I tested Chrome for IOS and noticed the two buttons from GD embedded videos (that allow us to change resolution and subtitles) don't work in it, but they BOTH WORK in Safari for iOS.

    I reported this defect here:
    https://code.google.com/p/chromium/issues/detail?id=564660

    And if you tried to open any GD video in Chrome for iOS, you'll notice it invites you to open that same video in the GOOGLE DRIVE app from Apple-Store. This may be the reason why the buttons aren't working in the browser. Normally I would say we should all watch them using the app, however:

    a) Subtitles aren't working in it;

    b) If the video has HD resolution, the app will display in HD-mode (it seems the best-res is chosen). In the browser we are able to switch between 360/480/720/1080p quality.

    *****

    For me the worst thing about all of this is that I am:

    - Unable to watch any of these videos switching subtitles and in fullscreen mode, using the browser to play them.

    *****

    One way to make this less painful is to change the URL from the video from:

    https://drive.google.com/file/d/0B21fQyiIJBBnWms0S2UyaUFNeWM/view

    To:
    https://drive.google.com/file/d/0B21fQyiIJBBnWms0S2UyaUFNeWM/preview

    At least, if your original file has lower-res, it will take more space from your window. Try watching both links in Safari for iOS and you'll see what I mean.
     
  13. Perene thread starter macrumors 6502

    Perene

    Joined:
    Jun 29, 2015
    Location:
    Netherealm
    #13
    That's just great. Can you believe Google fixed this problem but created another... much worse?

    Now all videos can go fullscreen in iOS 10.2, in my iPAD, using Safari. But they removed the option to switch between resolutions, and the subtitles are NEVER appearing. I noticed a long time ago that when I managed to change the useragent to iPhone (while using the iPAD), this was the expected design and behaviour of Google Drive. So it seems they changed how Google Drive appears in the iPAD, however they removed these features.

    This is an example, you need to watch using a PC and then try with the iPAD:
    https://drive.google.com/file/d/0Bz47srLwNOKBX3h0YVQ5YURucVk/preview

    As you can see, only in the PC all these features are available.

    Again I reported this bug in the same places as before, let's see if they will care to fix.

    I suggested that they should look how Youtube works in the iPAD, when we send the videos to fullscreen, we can read the subtitles, they appear with a white font.
     

Share This Page