Jump to content

How to use YouTube api and Javascript with SquareSpace

Recommended Posts

Site URL: http://s15.squarespace.com/guitar-kids-a-lesson1

My embedded iframe YouTube videos (with 'start' and 'end' parameters) DO NOT play on MOBILE.

// MY FIRST ATTEMPT - Youtube iFrame

I used the following YouTube iframe in a code block.

<div style="position:relative;padding-top:56.25%; margin-top:0px;">
  <iframe width="100%" height="100%" 
    src="https://www.youtube.com/embed/x7qfdYyHJ_c?start=285&end=340"
    frameborder="0" style="position:absolute;top:0;left:0;width:100%;height:100%;" 
    allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
  </iframe>
</div>
This code works great on Desktop!  But NOT ON MOBILE (it just bombs out.)

From what I can gather, this is a limitation of the YouTube iframe embed functionality, which only works on Desktop when you call start/end parameters.

// POSSIBLE SOLUTION - Javascript with Youtube api

Step 1: Use javascript/jquery with the YouTube api instead of an iframe, to call the video with the parameters.
Step 2: Ensure that when the visitor plays the video a second time (or more), that the video again plays from the intended 'start' position, and not jump to the beginning.

// STEP 1
 
I found this (related) tutorial on Stack Overflow.
 
...but I don't know how to incorporate this into SquareSpace.

What goes in the header, and in the body? How to set the start and end variables?

--
// STEP 2

Once Step 1 works for mobile, then my next step would be to ensure when the user watches the segment for a second or third time, that each time the video should again start at the intended 'start' position, and not to jump to the beginning of the video.

I found this related tutorial...

...but again, I don't know how to incorporate it into SquareSpace.

--

Your help will be greatly appreciated.

Kind regards
Pierre

PW: swallow15_pw

Link to comment
  • Replies 0
  • Created
  • Last Reply

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.