Embed Video in a Record

  • 0
  • 1
  • Question
  • Updated 3 years ago
  • Answered
Does anyone know of a way to embed videos in a record? Or in a dashboard? I'm nearly 100% sure this is not supported with native, but is anyone aware of a 3rd party that is able to do this?
Photo of Jake

Jake

  • 0 Points

Posted 5 years ago

  • 0
  • 1
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 30,224 Points 20k badge 2x thumb
Using the image onload technique you can embed any content in any QuickBase page where you can insert the magic image onload field [-]. These examples show a svg wireframe as a placeholder for inserting content into the page in relation to various components of the form:

New (Labels Left)
https://haversineconsulting.quickbase.com/db/bi9nhd8vw?a=nwr&dfid=2

Edit (Labels Left)
https://haversineconsulting.quickbase.com/db/bi9nhd8vw?a=er&rid=1&dfid=2

New (Labels Above)
https://haversineconsulting.quickbase.com/db/bi9nhd8vw?a=nwr&dfid=10

Edit (Labels Above)
https://haversineconsulting.quickbase.com/db/bi9nhd8vw?a=er&rid=1&dfid=10

You will notice that there is different code (see Pastie entry below) needed to insert content on a form that has labels place to the left or right of a field. Also note that I am not presenting a solution for slicing content into a view form. This is because on a view form there are no references to the field ids on the "form" and therefor there isn't a simple an obvious attachment point is there are on edit and new forms. I can think of lots of different schemes to insert content on a view form but I haven't decided which one is the best method to promote publicly. QuickBase does not like me advertising these methods that modify the DOM but alas they don't offer the feature to customize forms in the manner you and other user require. Personally I think the QuickBase designers should be sent to image onload reform school until they get it.

I wasn't planning on publishing this at this time so the code in the pastie may have some minor typos or inconsistencies that I will eventually correct when I make a decision about splicing content into a view page.

Pastie Database
https://haversineconsulting.quickbase.com/db/bgcwm2m4g?a=dr&rid=334
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 30,224 Points 20k badge 2x thumb
Photo of Jake

Jake

  • 0 Points
Dan,

Thanks so much for your help.  Great to know this can be done. I'm having a little trouble implementing though.  If I wanted to play the same video as in your example, would I paste the  code you had in the content field here:

var markup = '<iframe width="640" height="480" src="//www.youtube.com/embed/z18sBHbdBgI&quot; frameborder="0" allowfullscreen></iframe>';

$("img[qbu=module]")
  .replaceWith(markup);

 into an html enabled text field? In the field I am using there are no section headings and there is a label to the left.

Thanks!
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 30,224 Points 20k badge 2x thumb
You have to implement this through script using the image onlaod technique described here:

https://haversineconsulting.quickbase.com/db/bgcwm2m4g?a=dr&rid=294

If you send me your email addy I can get you a copy with admin access and you can see how it works.
Photo of Jake

Jake

  • 0 Points
Dan,

Thanks again for the help.  My email is jakerattner@runenergy.com.  In the meantime I'll take a close look at your instructions.

Kind regards,
Jake
Photo of Jake

Jake

  • 0 Points
Hi Dan,

This is amazing and a great intro to lots of other things I can do with this technique.  The only problem I am having now is that I'm trying to place a unique video with a unique record.  So far I'm just able to place the same video in every record.  I'll keep at it though.  Thanks so much!

Jake
Photo of Jake

Jake

  • 0 Points
Hi Dan,

Wow, you are fast.  I took a look at the app.  It seems like I was able to replicate what you're doing in this app.  When I add a new record in the app, that record also contains the video. Its a pretty amazing technique.  I'm going to mark your comment as "helpful" and check answered. Last set of questions for now: Do you know how I would assign different videos to different individual records?

...and do you provide consulting services?  If yes, do you have a website/contact?

Thanks again,
Jake
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 30,224 Points 20k badge 2x thumb
My contact info is in my profile:

>Do you know how I would assign different videos to different individual records?

The image onload field is designed so that it will only run the module.js script once despite being included multiple times on reports or grid edits. So when module.js runs you can iterate through the records and place calculated content in the very place the image onload field was located. This net result of this is that the image onload field sort of acts as a client side formula that can produce any content and display it next to other fields in reports or in grid edit.

If you are just starting to use the technique I would fist master the technique on new, edit and view records before applying it to reports.
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 30,224 Points 20k badge 2x thumb
I spent the whole holiday weekend watching Grafitti Videos and thought I would shave my videography:

https://haversineconsulting.quickbase.com/db/bja4czmsy?a=q&qid=1


Pastie Database
https://haversineconsulting.quickbase.com/db/bgcwm2m4g?a=dr&rid=336

I used a slightly different formula for [-] to implement the image onload field and additionally burn the [VideoID] value into an data attribute of a <div>:

[iol] & "moduleVideos.js" & [/iol] & "<div data-videoid='" & [VideoID] & "'></div>"


The code in the moduleVideos.js file then iterated over all <div>s with the videoid data attribute and inserted the appropriate embed code for the YouTube video.

You will notice that the report is slow filling in the video posters because 72 requests have to be made to Youtube to get the details and the posters appear in random order. This is one of the remnants of using the image onload technique on reports for which you have to pay attention to as the report could easily have hundreds of records displayed.

It is worth mentioning that there are many ways to introduce the [VideoID] to the moduleVideos.js script and then iterate through each record inserting the video embed code. If I had to this task at another time I may well have chosen another approach. Once you get familiar with these techniques it becomes effortless to make QuickBase do your bidding and you realize that "All the DOM's a stage, And all the elements and attributes merely players."
Photo of Jake

Jake

  • 0 Points
Dan,

Got it.  Thanks a lot.  I added a video to the app I thought you might enjoy.

Jake
Photo of David

David

  • 0 Points
Can you send me a copy to?  This is something I'd like to do as well. david@bestoharaonline.com