Embed video on a page

Backlight Customization
#1

Hi there,

Just want to embed a video (hosted where my backlight install is) on a page via the page-copy.

Can this be done through iframe or embed? Or is there a simpler way? I can’t seem to get a combination working at the moment.

Cheers,
Chumby

#2

Theater has a video embed presentation option. That’s simplest.

#3

For creating a gallery for videos, yes.

You should be able to copy-and-paste embed code from YouTube (or wherever) into any copy area that accepts HTML, though. Like if you want it on a Backlight page, for example.

#4

Yes just want it on a normal backlight page - not placing the video in a gallery.

Have been trying the video, iframe and embed tags (copied into a page-copy area) at different times but haven’t found anything that has worked as yet.

Any recommendations on which tag may work? My video is located on the same server as my backlight install - not on youtube etc.

Cheers
Chumby

#5

What kind of video? Are you using html5 video?
If so, you could insert a Theater album configured for html5 video into a regular page. The html5 video option is for video you’re hosing on your own site.

#6

So that sounds like you’re trying to include the video natively, using HTML5. And honestly, that’s not easy to do.

Definitely read the information Rod linked to, as it’s a lot of prerequisite for HTML5 video, whether using Theater or not. That may or may not be enough to get you there; look up some more in-depth HTML video tutorials if you need to, or maybe investigate video player plugins.

IMO, it’s more effort than it’s worth, and you’d be better off just putting the video on Vimeo. Let them worry about serving the right video size to whichever device. All that really happens when you host your own video is that you end up serving a wide-display 4K video file to someone’s iPhone. That ain’t good.

#7

OK, appreciate that Matthew. Yes that what I have been trying to do. I can see there are issues with my approach.

What I am aiming to do is add a short image slideshow at the top of my page (I have already inserted an album under the content, so this is independent of that).

Moving on from an animated giff approach, I looked at CSS slideshows (as demonstrated at W3 Schools) but had no luck there… so thought a quick movie might be an approach to explore. Seems like to many hasels here also.

You can see my site at https://www.tasmanianphotos.com and instead of the static image at the top of the main content (under the search), I am trying to get the animated slideshow happening there.

Happy to take best advice on getting this sorted or include another module if that would work.

Appreciate your help as always.

Cheers,
Chumby

#8

We don’t really have any features to support embedding a slideshow in an album. This is something the JSON API would be well suited for, but then you’d still need to bring the slideshow code to the table.

I’ve been thinking about ways we might be able leverage the JSON API to build features, so this is something I might have an easy solution for in the future, but right now, not so much.

#9

Gotcha… thank you Matthew. That would be good to see.

Have just been playing around with Google Web Designer. Looks promising. There is a slideshow template in there. Have just created a test slideshow, published it and uploaded it to my site. Have then been able to display it using and iframe tag from a main content area on my homepage.

Looks pretty rough at the moment (https://www.tasmanianphotos.com) but I may be able to get this working and looking nice with some more effort. Will let you know how it goes!

Thanks again for your help.

Cheers
Chumby

#10

This might be something you can use until a JSON API solution becomes available, something I have been looking at as well while I did my microsite.

https://danielleu.com/blog/2016/07/adding-a-slideshow-to-backlight-based-pages/

#12

Thanks Dan - looks good!

I am still testing Google Web Designer and having some success. Slideshow now appearing in an iFrame on my homepage at:

https://www.tasmanianphotos.com/

with the only line of code in my page content area as…

<iframe src="https://www.tasmanianphotos.com/website_slideshows/homepage_slideshow_1/" width="600" height="450" style="float: right;"></iframe>

Now just need to see if I can get things scaling for smaller devices.

Cheers,
Chumby

#13

Be sure to take a look on mobile devices. On my iPad it looks ok but on my iPhone in portrait orientation the slideshow images are cut nearly in half.

#14

Yep. Thanks Rod. Just checking now. Will see if I can scale it … or maybe export a small version as well from GWD.

Do you know of any pho / css that can check screen size? Might be able to include that…

Cheers
Chumby

#15

media queries can check for browser or device width
https://www.w3schools.com/css/css_rwd_mediaqueries.asp

#16

Hi Rod,

Have come up with the below - seems to be working on the website but not the mobile. Is that the same for you or can you see anything I am doing wrong here?

<style>
@media (max-width: 400px) { //set max width to your preferred mobile width.
    .lg {display:none;}
    .sm {display:initial;}
}
@media (min-width: 401px) { //set min width to be larger than the css rule above.
    .lg {display:initial;}
    .sm {display:none;}
}

</style>

<iframe class='lg' src="https://www.tasmanianphotos.com/website_slideshows/homepage_slideshow_1/" width="600" height="450" style="float: right;"></iframe>

<iframe class='sm' src="https://www.tasmanianphotos.com/website_slideshows/homepage_slideshow_1_mobile/" width="200" height="150" style="float: right;"></iframe>
#17

the media query is not formed correctly

should be

@media and (max-width:400px) {
…

#18

Hi Rod,

Didn’t seem to make any difference. Also tried:

@media screen and (max-width: 400px)

Still nothing different. Any ideas?

#19

try this:

@media only screen and (max-width: 400px){
    .sm {
        display:block;
     }
    .lg {
        display: none;
    }
}
@media only screen and (min-width: 401px){
    .sm {
        display:none;
    }
    .lg {
        display:block;
    }
}

One thing I’d suggest is making the small video wider, like 360px and removing the float:right; inline styling. That way, when it’s viewed on a phone the video will appear above the text and it will be larger and easier to see.

(I don’t really know why adding the only screen to the media query makes it work)

#20

That’s brilliant, Rod. Thanks it is showing up now properly on the phone.

I will make those changes to a 360px animation as you suggest as I see what you mean.

On that note I would recommend Google Web Designer for these animations for sure. Free and easy to use, once you have an animation working you “publish it” and it creates a index.html file and associated javascript files in a folder. All you need to do then is upload this folder somewhere to your server and point to the html file created by GWD via an iframe tag (as above) and away you go!

Thanks all,
Cheers
Chumby

#21

good to know. It does seem to add to the overhead though. Seemed like it took a while for the slide show to load.