embedding video using javascript embed code

build learning interactivity

Moderator: Nav

embedding video using javascript embed code

Postby ayoub » Wed Oct 17, 2012 2:49 am

Hi,

I use a lot of video in my lessons. These videos are too large to integrate into the lessons, so I prefer to embed them.

So far we've used vimeo for video hosting, using the iframe object and code like this: <iframe src="http://player.vimeo.com/video/VIDEO_ID" width="WIDTH" height="HEIGHT" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>. That works well.


For other reasons, we've outgrown vimeo and are probably going to switch to Kaltura for our video management and hosting. And I'd like to embed video using javascript embed codes. I've discovered it won't work in the iframe object. Is there another way to get it working?

This is what the embed script would look like (this is a Kaltura demo video embed code):

<script type="text/javascript" src="https://www.kaltura.com/p/1141952/sp/114195200/embedIframeJs/uiconf_id/9941362/partner_id/1141952"></script>
<object id="kaltura_player_1350467442" name="kaltura_player_1350467442" type="application/x-shockwave-flash" allowFullScreen="true" allowNetworking="all" allowScriptAccess="always" height="333" width="400" bgcolor="#000000" xmlns:dc="https://purl.org/dc/terms/" xmlns:media="https://search.yahoo.com/searchmonkey/media/" rel="media:video" resource="https://www.kaltura.com/index.php/kwidget/cache_st/1350467442/wid/_1141952/uiconf_id/9941362/entry_id/0_g85oxljh" data="https://www.kaltura.com/index.php/kwidget/cache_st/1350467442/wid/_1141952/uiconf_id/9941362/entry_id/0_g85oxljh"><param name="allowFullScreen" value="true" /><param name="allowNetworking" value="all" /><param name="allowScriptAccess" value="always" /><param name="bgcolor" value="#000000" /><param name="flashVars" value="streamerType=rtmp&&" /><param name="movie" value="https://www.kaltura.com/index.php/kwidget/cache_st/1350467442/wid/_1141952/uiconf_id/9941362/entry_id/0_g85oxljh" /><a href="https://corp.kaltura.com/products/video-platform-features">Video Platform</a> <a href="https://corp.kaltura.com/Products/Features/Video-Management">Video Management</a> <a href="https://corp.kaltura.com/Video-Solutions">Video Solutions</a> <a href="https://corp.kaltura.com/Products/Features/Video-Player">Video Player</a> <a rel="media:thumbnail" href="https://cdnbakmi.kaltura.com/p/1141952/sp/114195200/thumbnail/entry_id/0_g85oxljh/width/120/height/90/bgcolor/000000/type/2"></a> <span property="dc:description" content="Kaltura logo"></span><span property="media:title" content="Kaltura Logo Image"></span> <span property="media:width" content="400"></span><span property="media:height" content="333"></span> <span property="media:type" content="application/x-shockwave-flash"></span> </object>

I hope there's an easy way to do this I overlooked. I'm not a programmer, I'm just learning as I go.

Thanks for your help,

Ayoub
ayoub
 
Posts: 12
Joined: Tue Apr 05, 2011 2:22 am

Re: embedding video using javascript embed code

Postby Nav » Wed Oct 17, 2012 12:57 pm

Hi Ayoub,
I think we can get this to work pretty easily! What you have isn't exactly embed code in the strictest sense of the word. But I took the code you provided and pasted it into a new html document (generated in Dreamweaver). I can't attach it, but you can right click on this link and choose "save as" - http://examples.suddenlysmart.com/videotest.html . Please try using the IFrame object, and use the Select Asset property, and then upload this file (when given a choice, pick "A single non-media file").

I got it to bring up the video player, but not a video. I don't know if the code you provided pointed to a real video or not, or if the forum stripped away something necessary. But it didn't seem localized to SmartBuilder, so I'm thinking this is something that can be fixed.

In any case, you can edit the attached html file and replace the code in there with future video code and it should work! Let me know if it doesn't.

- Nav
Nav
 
Posts: 866
Joined: Mon Nov 05, 2007 2:58 pm

Re: embedding video using javascript embed code

Postby ayoub » Wed Oct 24, 2012 3:12 am

Hi Nav,

Thanks for your help. It works! Also, I've discovered pasting the script in the embed code does work after all. All it took was a fresh iFrame object. Maybe it didn't work before because I was using an iFrame object in a copy of an old lesson? I don't know.

Directly pasting the code in the embed field seems a lighter option; the lesson loads quicker.

Now I do have another issue though. There is a white border around the embedded video. I can't paramater my way out of it. Also, I've tried the same script on a regular website: no border. Is there anything I can do?

Thanks again

Ayoub
ayoub
 
Posts: 12
Joined: Tue Apr 05, 2011 2:22 am

Re: embedding video using javascript embed code

Postby Nav » Wed Oct 24, 2012 12:06 pm

Hi Ayoub,
It depends a little on the browser. For example, when I place an IFrame with YouTube embed code in a lesson, it looks different in IE than it does in FireFox. In IE, I get a white background that is the size of the IFrame placeholder. In Firefox, it makes the extra space transparent.

If your learners are going to be using IE, and you want to adjust the color of that background, you can do so by adding more html code to your embed code. So at the beginning (and end), you can put a tag like the following (this will make the background black, but you can replace the 000000 with any hex code and it will work):

<body bgcolor="#000000">
<object embed code goes here></object>
</body>

Let me know if that helps.

- Nav
Nav
 
Posts: 866
Joined: Mon Nov 05, 2007 2:58 pm

Re: embedding video using javascript embed code

Postby dthatcher » Mon Feb 25, 2013 7:58 am

Sorry to resurrect a thread that has gathered a bit of dust, but this thread is most closely related to my present issue. I am trying to use the iFrame embed property to bring in videos from screencast.com. Eventually, we will be posting the videos to youtube. I'll likely come back to the youtube thing later because I havent been able to get youtube's new embed codes to work in my tests. My real issue is with the inconsistent way that videos display in the various browsers (I tested, Chrome, Firefox, Safari and IE9). All browsers except Firefox are having issues. No matter how I size the video, the browsers puts horizontal and vertical scrollbars on! I'm wondering if there might be a way to add something like what you suggested in your previous post (background colors) to get scrollbars to shut off?

This screencast shows what I'm doing and the end result:

http://www.screencast.com/t/rzfGpqbRwcQ

Would be so great to get a solution to this because I really don't want to have to embed the video in SB or stream the video using SB's default video player.
dthatcher
 
Posts: 1
Joined: Thu Aug 30, 2012 10:22 am

Re: embedding video using javascript embed code

Postby Nav » Mon Feb 25, 2013 11:42 am

Hi Dan,
We should probably look at this together. Does the lesson scale? Can you try to maximize the window in the browsers where it wasn't working.

I noticed in the FF demo that didn't have scroll bars, the video didn't even make it to the woman's face on the right. On all the others, the video took up nearly all of the screen. We can also take some measurements of the video and the lesson around it. If the lesson is scaling, but the video inside is not, I could see that causing issues.

Generally you want to make your IFrame a few pixels larger than the contents because different browsers calculate the size differently based on whether or not they are going to include the scrollbar.

I don't think the issue in this case is that you want to shut of the scroll bars. You probably could find an html tag that would allow this (probably setting the height and width using the body or a div tag, same as the last suggestion), but then your video would still be too big and get cut off. What you want to do is make sure the video fits in the place you want it.

It'll probably be easiest to take a look at this together.

- Nav
Nav
 
Posts: 866
Joined: Mon Nov 05, 2007 2:58 pm

Re: embedding video using javascript embed code

Postby Nav » Mon Feb 25, 2013 1:05 pm

Oh, also regarding the YouTube embed code...

EDIT - Here's the best way to embed YouTube videos now - http://help.smartbuilder.com/node/612

- Nav
Nav
 
Posts: 866
Joined: Mon Nov 05, 2007 2:58 pm


Return to Action/Flow Chart/Variable

Who is online

Users browsing this forum: No registered users and 3 guests

cron
Not able to open ./cache/data_global.php