Load videos on same page

Hi -
I’d like to create a single page with thumbnails and text links to load videos (youtube and embedded) but I’d like to load the videos in the same placeholder so the user is always on the same page.

I made a rough animated gif of the idea: https://d.pr/i/qfcMbX

I’ve seen this done before but not sure what’s involved. Hoping this is possible with BLOCS.

Thanks!

I’ve done this for a few clients and the procedure was fairly straight forward. However, there is a small anomaly in blocs that requires you to edit your video links after your page is published. Essentially, you start by adding a code bric to the page that will be used to display the large video. Inside that bric you add the iframe embed code for the default video. I tried using the video bric for this but it didn’t appear to work well later down the line - so I just use the normal code bric. It is important that you NAME the iframe in the code (just add name=“myiframe” into the code just after the “frameborder” styling option"

on each of your video thumbnails, create a link that points to the url of the video. Use the link from within the embed code - not the normal share link.

Now this is where the anomaly raises its ugly head. If you select your first thumbnail link, you can add a custom attribute in the settings panel on the right of the screen. The attribute name would be set to target and its value would be set to myiframe. What this does is tell the link to fetch the next video and display it inside you named iframe. it looks like this when set up:

Screenshot 2020-07-22 at 18.07.40

With the link still selected on the page, if you preview in a browser you will notice that the default video displays and clicking the link you’ve just created swaps out the video as you would expect. However, if you return to blocs and select the next thumbnail link and set that up in a similar manner, that too will work in preview, but the first link will no longer work. This is because the custom attribute has changed to undefined. Like this

Screenshot 2020-07-22 at 18.12.14

This change seems to happen every time a new link is created.

To overcome this problem, I just set up the links with the youtube url from the embed code and then publish the site to disk, Then, in a code editing application I manually add the target attribute to all the video links. The end result works, but it is a little inconvenient having to go outside of blocs, particularly in view of the fact that the custom attribute CAN be applied in blocs and it does work as long as you don’t have more than one link.