How can I get this google photos embed to work inside magnific popup

问题

I have had this serious issue for a while and cant seem to solve it. I have been asking many questions on online forums and haven't gotten very close to the answer...

here is the issue. I need to try and get this google photos embed to work inside a popup. What happens is that the embed inside the popup only works if it is opened up really quickly before the page has finished loading. Although this is true once the popup is closed and opened again it then fails to load embed. Also If the popup is opened up later on after page is loaded it fails to load embed below are images of how this is working.

Popup before being opened...

Popup opened but not working...

Popup opened and working (only when opened fast before page finished loading)

I have tried many things to try and get this embed to work but I am very new to coding and have very little knowledge on it... (only basic knowledge). I'm assuming the issue is that something is preventing the embeds connection to my google photos album and I dont know how to fix this. the embed only fails to work inside popup but on page it works perfectly fine.

below is the google photos embed code for one of my albums

<script src="https://cdn.jsdelivr.net/npm/publicalbum@latest/embed-ui.min.js" async></script>
<div class="pa-carousel-widget" style="width:100%; height:480px; display:none;"
  data-link="https://photos.app.goo.gl/WZzzQvvGkNAGhtWw5"
  data-title="Black Dragon pick"
  data-description="15 new photos added to shared album">
  <object data="https://lh3.googleusercontent.com/SZi8jU5_9OjLynsuQ5eMYNEpZRHD6NBi6wr1aFc542n1bX21DybxqNmSJWJRQPcNvg6DUvi2QZv17srJ0qt9f2-JsbyFCQlLSIWDK9fhxqKYKzmzc5XTknx13C22GvD1QnBSMq8ApA=w1920-h1080"></object>
  <object data="https://lh3.googleusercontent.com/4DWsqfHhuigmpm0V9s1n1_M1X4U_kzOnME_2xhqmwWVwsQGN1wQVPgp4CFYOIRjZcTJQhkRuGXL0Ggh1waDr6WjqNcYtCqhm0Kufkogi32WW2JAhMCNwLgW6YZwt_IMSW0zCaXJYtA=w1920-h1080"></object>
  <object data="https://lh3.googleusercontent.com/aUJxEkLLn4Ff7dpgK0zG60IKrLp_nng76ryvr5Xe1VGaB0-SD87umRNloyEhFq5A8EgJcn80trroYmAkFwGwWOh8QH10sVdNbFRJwu_MfTQTNcTPrYFKVeYPlP88dS42iwH5aJpALw=w1920-h1080"></object>
  <object data="https://lh3.googleusercontent.com/VQZWnSjYL4LbgWB8xp-ZM2Bq09zzP5kHAn7SETCttM5e4sp7GC8YPCvNE7VUDtUO3bhgDfkST8byR_Qe--h7Ntxavzwm_E-h6OrkvYWJDAplHxT99VltoeUsjwPFftBEdVReDVjlLw=w1920-h1080"></object>
  <object data="https://lh3.googleusercontent.com/HR0zBlvtuf7G8M1Igd8DClV7I_3cmCHzYnBdjFdV9q_wuWpD3GKbOK9e-ZRFhuZZtnC5WQEweBXUwUOUJQBg1Hz4B8W0Ald1HJbWQzl-0st1Obzv3K5uOSRATbcbS__PyRMdLg0Itw=w1920-h1080"></object>
  <object data="https://lh3.googleusercontent.com/3I4gP309kC5Io3ZUwjg46sJKlBRyxWD2B4wxTprI3Ns1FNYkH4e8xfVljHIbz-aPZKaPYiUpMXIAJYTVBXiyYFKEW6yO26sXRiIK-v0mmrtx7ig69B_KZgPxxSxxGhEGCPuhTSBDnQ=w1920-h1080"></object>
  <object data="https://lh3.googleusercontent.com/6Gx-YMtNj5AvJ0QWkg8LOOIU72iibDTtnbMKUX5AoZAiZY9Oyirgt_6rTiLtbHA-5Lb05P7L3mneXnObaLTV_uPFTAOW45Ac9JJu6g5q_7X_zqOBFqrIJfd5KvPk6s6-vGioxnGexQ=w1920-h1080"></object>
  <object data="https://lh3.googleusercontent.com/9WUpLJ1U2hW-8WDban2SfdNwdtOVzJDkf7-5Ir_r7Uvu69XQleUEl5IOq88JNz96iQ3-oikYHSNWU-RakKaV_PiEvso8NEXnUkXNVgneylQlDfaKxVVVGwgYCFEJVhP2zMd1EEKRpQ=w1920-h1080"></object>
  <object data="https://lh3.googleusercontent.com/gtCgYLZemF-Qyf7Db8N5WRD6QgJWkHJZPwGJ7q9v4GsTRwxoKeklUry8j3Yss2ur59sNydpjLSMg0RD8tMwRrJscm85a8zIYVazxKXcq0krK9-IDzNEDAwGnL8oNv8Qp2aIN3Cc2Yw=w1920-h1080"></object>
  <object data="https://lh3.googleusercontent.com/0CXAyu8Sf3Gco3b7qnllzCY3WCuYWIXHMWyTUHvE3uu5YsDuVWWPyhDyFWJJdunKEdO7oJOyu421iV5PlKH79rdkY4b5pcCnZP9nu490YUt16XQBWuusv1SivMl_UHVNWC5jZeG6Xw=w1920-h1080"></object>
  <object data="https://lh3.googleusercontent.com/0rs88cC3UfxTaO0bIHFCzYbEcSrnlJwR1Llo-O71OmLkRav6nkMrWX75n0a6DgpGgLHxHNKVcnHfAAMVI7Esm7u5jia6tb0lHOCuE8he52zHpHsYSG99U7mlY6rHV9l6tVvMHNsthA=w1920-h1080"></object>
  <object data="https://lh3.googleusercontent.com/J6UvaieNs7M-X08WmFb86IyvgIyBHSkfedg-U8UEN0FuKS5wCrDVsHL1k6m2ayZmDFpgaKRLVBd_FUFnhO6GNue1ZhOYc7m2Y4bnbnlg3yTzWRFilpy0_0vN7EqSsfrPMoI0re0vYA=w1920-h1080"></object>
  <object data="https://lh3.googleusercontent.com/QM8IAotB_Q-pfhkCKEBTcJdNp0FfhzmvOdfImslAi_xuYX5RMiTsXQneorxqRUztPNlfFl8ht7iRoOhORSFhlOjKInbGfGpur-v3KX2eyx4jjC4sGQ-b2rM5EUCZbqNC6L6vdECH-Q=w1920-h1080"></object>
  <object data="https://lh3.googleusercontent.com/1mD9NrdeXWs5rzEDa3pgC0B7hQ4e7XaKrFWFHHYP_Vxpdff8WDqhanW2xAzJ9amFfaL-7R3DsUN1xPGcl4DPNlBMRLZKWeFsN7NW6d3-MG9dUHl4zKHZ00aiCzg4c3S7IliKDYHBsA=w1920-h1080"></object>
  <object data="https://lh3.googleusercontent.com/ze3BfpX1CQkrqbIDth3V_XYrq_IGM51U8QaxJ7tv-sUJ_wOs5qOFgKOiIDFuG4H9OhYWDW_TacMK8WWQbEfn5AXpfIiribLaQFXR6h6WG9ocqsSQRrGxRxz1N3kgodcNyPv75EtIdQ=w1920-h1080"></object>
</div>

here is also a link to the website used for creating the google photos embeds https://www.publicalbum.org/blog/embedding-google-photos-albums

Code doesn't seem to be working on site but it does work... your help and support is greatly appreciated.

Kind Regards

来源：https://stackoverflow.com/questions/60594464/how-can-i-get-this-google-photos-embed-to-work-inside-magnific-popup

标签

javascript