pflombard Posted July 26, 2020 Posted July 26, 2020 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 apiStep 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
Recommended Posts
Archived
This topic is now archived and is closed to further replies.