Embedded Video Issues

David Langley

• April 16, 2021 21:53

Hi, 

I built a members only website a few months back for a fitness coach. This includes embedded videos for each workout.

http://nerdhousedesign.com/brizy_help_screens/main_screen.png

They contacted me today as the videos were displaying oddly. When you click on the videos they play as normal. But when you click the full screen icons the appear behind everything.

http://nerdhousedesign.com/brizy_help_screens/video_1_fullscreen.png

Also when you scroll all the other videos start appear on top.

http://nerdhousedesign.com/brizy_help_screens/video_1_fullscreen_scrolling.png

This only happened after the last few updates. I have turned off all plugins and they are affecting this issue.

I played around with the Z-index, I set all the videos to 10 but they still run into issues of loading over each other, so this doesn't help.

Note, this only seems to happen in Chrome. Safari is still opening the video full screen window.

Any ideas?

David

0

• 

  David Langley

  • April 16, 2021 22:44

  Note, I just tried adding the video embed code into a 'Text' element and the video works full screen no problem.

  So this must be something you have changed with the 'Embed' element, possibly?

  Can you confirm? I don't want to go through and change everything on the website to find there is an easy fix.

  0
• 

  Sandra Prunici

  • April 19, 2021 12:00

  Hi David,

  Could you please send us the embed code you added in the text element? Yes, for embed code, we have the embed element and we are recommending using it. Could you please use it and try if all is working fine?

  Thanks!

  Best regards,
  Sandra

  0
• 

  David Langley

  • April 19, 2021 13:31

  Hi Sandra,

  The embed code is

  <script type="text/javascript" src="https://ryanraw.evsuite.com/player/cmVjb2RlLW9uZS5tcDQ=/?responsive=1&autoResponsive=1&container=evp-S30Q19QDV9"></script><div id="evp-S30Q19QDV9" data-role="evp-video" data-evp-id="cmVjb2RlLW9uZS5tcDQ="></div>

  I have had to change them all from using the EMBED element to the TEXT element as when you make the video full screen it appears in the background in Chrome/Blisk. Safari works perfectly.

  0
• 

  Sandra Prunici

  • April 20, 2021 08:24

  Hi,

  Thank you for the embed code. I checked it in 2 external simulators and in both cases, the videos don't show fine but with some problems. Here in this simulator https://codepen.io/leemark/pen/ozyWbv, I added twice the code you send us as 2 videos and I find that the second video was displayed overlapped by the first video. See here https://jmp.sh/ru3g3pG. Therefore, I suppose that the problem can be in the embed code.

  Thank you!

  Best regards,
  Sandra

  0
• 

  David Langley

  • April 20, 2021 14:15

  Hi,

  Thanks for testing this code and sending examples using codepen. 

  Strangely I just set up a test page to send you to explain the situation further and its all appearing correctly using the 'embed' element. I then went back to the live site and changed two 'text' element back to the 'embed' element and everything is working correctly again. I can view the video full screen without the issues.

  So, I have no idea what went wrong. I will continue to keep 2 videos within the 'embed' function and the rest within the 'text' element and see if the issue occurs again.

  Thanks again for your great support and guidance. 

  David

  0
• 

  Sandra Prunici

  • April 21, 2021 08:11

  Hi David,

  Ok, thank you for your reply and for updating us regarding this inconvenience! Great to know that all is working fine on your site now.

  Let us know if we can help you with something else.

  Best regards,
  Sandra

  0

Please sign in to leave a comment.