How to embed video from Google Drive

[genekogan]

How do I embed an external video from GDrive in FancyBox? I tried by getting my shared video's iframe embed code and inserting like this:

<a data-fancybox data-type="iframe" data-src="https://drive.google.com/file/d/MY_GDRIVE_FILE_ID/preview" href="javascript:;">

On my laptop (Mac), this works reliably in Chrome, Safari, and Firefox. On my IPhone however, the embed fails on click, showing just a black box for the video. In the developer console, I get an error about same-origin-policy (not sure why this doesn't prevent it from working on laptop):

[Error] The source list for Content Security Policy directive 'script-src' contains an invalid source: ''report-sample''. It will be ignored.
[Error] The source list for Content Security Policy directive 'script-src' contains an invalid source: ''strict-dynamic''. It will be ignored.
[Error] The source list for Content Security Policy directive 'script-src' contains an invalid source: ''strict-dynamic''. It will be ignored.
[Error] Blocked a frame with origin "<MY_DOMAIN>" from accessing a frame with origin "https://drive.google.com". Protocols, domains, and ports must match.
    map (jquery.min.js:2:3511)
    (anonymous function) (jquery.min.js:2:27646)
    (anonymous function) (jquery.fancybox.min.js:11:23135)
    dispatch (jquery.min.js:2:43096)
    trigger (jquery.min.js:2:71519)
    (anonymous function) (jquery.min.js:2:72116)
    each (jquery.min.js:2:2981)
    (anonymous function) (jquery.fancybox.min.js:11:22990)
    dispatch (jquery.min.js:2:43096)
[Error] Blocked a frame with origin "https://mars.college" from accessing a frame with origin "https://drive.google.com". Protocols, domains, and ports must match.
    map (jquery.min.js:2:3511)
    (anonymous function) (jquery.min.js:2:27646)
    (anonymous function) (jquery.fancybox.min.js:11:23135)
    dispatch (jquery.min.js:2:43096)
    trigger (jquery.min.js:2:71519)
    (anonymous function) (jquery.min.js:2:72116)
    each (jquery.min.js:2:2981)
    updateSlide (jquery.fancybox.min.js:11:17329)
    revealContent (jquery.fancybox.min.js:11:27866)
    afterLoad (jquery.fancybox.min.js:11:26189)
    (anonymous function) (jquery.fancybox.min.js:11:23013)
    dispatch (jquery.min.js:2:43096)

Is there a better way of doing this than using an iframe or a fix to this problem? I am also open to hosting the videos elsewhere. My goal is for FancyBox to embed large videos hosted on external site (e.g. Dropbox, GDrive) rather than my own website, with a preference to avoid using YouTube or Vimeo or other social/sharing sites if I can.

[DeeSouza]

Did you to embed?

[genekogan]

No, I ended up using an iframe. I'd still like to figure this out if I could...

[stefan-zh]

Embedding using iframe worked for me: https://fancyapps.com/docs/ui/fancybox/plugins/html/#iframe <a data-type="iframe" href="[link to GDrive video]" data-fancybox="gallery-video">