How to embed video from Google Drive
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.
Source: fancyapps/fancybox