General help

Embedding Vimeo Videos

 
 
Picture of Shoaib Ahmad
Embedding Vimeo Videos
 

Hello,

I am able to embed vimeo vides through label successfuly within a topic but the video loads automatically. I want that the video should only load when I click on a text that is hyperlinked to the video. How is this possible?

 
Average of ratings: -
Me
Re: Embedding Vimeo Videos
 

Hello Shoaib,

Have you tried putting the video embedded in a Page?
I think this would allow you to have a course page without autoloading video everytime someone loads the course.

This would appear as a link within the course topic area.

 
Average of ratings: -
Gmads
Re: Embedding Vimeo Videos
Group Testers

Hi Shoaib,

Can you put the code here to see it? I think it must have the "autoplay=1" attribute set. Remove it (along with the previous ampersand character).

With autoplay:

<iframe src="//player.vimeo.com/video/94923911?title=0&amp;byline=0&amp;portrait=0&amp;autoplay=1" width="250" height="190" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>

Without autoplay:

<iframe src="//player.vimeo.com/video/94923911?title=0&amp;byline=0&amp;portrait=0" width="250" height="190" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>

 

You can also disable this option at the Vimeo "Share this video" pop-up:

  1. Select the Show options link.
  2. Unmark the Autoplay this video check box.

 


 
Average of ratings:Useful (1)
Picture of Mark Andrews
Re: Embedding Vimeo Videos
Group Particularly helpful Moodlers

Hi Shoaib,

From what you are saying are you wanting the following action: 

  • User clicks hyperlink - video loads and plays within the same page - is this correct?
If this is the case, vimeo has some a nice javascript API which we use to create a playlist of videos, where by the user can click different video links on the page which then load into the same iframe.

The code we use looks like this (it can be pasted into a label):

<!-- collection of video links -->
<span class ="row"> <span class="span4"> <ul class="nav">
<li><a id="videocontent" href="http://player.vimeo.com/video/57975986" target="videocontent"><i class="icon-film"></i> Fading West</a></li>
<li><a id="videocontent" href="http://player.vimeo.com/video/95342512" target="videocontent"><i class="icon-film"></i> Food</a></li>
<li><a id="videocontent" href="http://player.vimeo.com/video/85960055" target="videocontent"><i class="icon-film"></i> Rodents on Turntables</a></li>
</ul> </span> <span class="span8">

<! -- iframe for displaying the video -->
<iframe id="videocontent" src="http://player.vimeo.com/video/57975986?api=1&amp;player_id=videocontent" name="videocontent" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" frameborder="0" height="285" width="500"></iframe> </span> </span>

<!-- Vimeo javascript the handle the loading of the different videos -->
<script src="http://a.vimeocdn.com/js/froogaloop2.min.js" type="text/javascript"></script>
<script type="text/javascript">// <![CDATA[
function ready(player_id) {
var player = $f(player_id),
playbutton = document.getElementById('videocontent');
playbutton.addEventListener('click', function () {
player.api('play');
});
}
window.addEventListener('load', function() {
$f(document.getElementById('videocontent')).addEvent('ready', ready);
});
// ]]></script>

Some notes:

  • Adding the autoplay code that Guillermo has posted to each of the video URL's will then cause each item to autoplay when clicked on.
  • setting the default 'src' attribute in the iframe to '#' will result in a blank iframe (which maybe what you want) which is loaded with the video once clicked on

Without any pretty bootstrap or responsive video displaying the above code acts like this: http://www.screencast.com/t/sygDds92

We find vimeo really useful, would be keen to see what others have done with it!

All the best

Mark

 
Average of ratings:Useful (1)
Gmads
Re: Embedding Vimeo Videos
Group Testers

Hi Mark,

From what I understood, Shoaib wants the video displayed but not having it play automatically.

Maybe in the code you are using the autoplay attribute works differently, but with it one shouldn't need to click on anything for the video to start playing.

Good code, the one you're using Yes

 
Average of ratings: -
Picture of Mark Andrews
Re: Embedding Vimeo Videos
Group Particularly helpful Moodlers

Hi Guillermo,

Ah - in which case my code is way over the top! - thanks for clarifying smile

All the best

Mark


 
Average of ratings: -
Gmads
Re: Embedding Vimeo Videos
Group Testers

Hi Mark,

As Shoaib hasn't mentioned anything else, well, we might not know, but one thing is certain: many people will find your code very useful! smile

 
Average of ratings: -
FreddieDiazBatista.com
Re: Embedding Vimeo Videos
 

I had the same issue I am using JW player and what I did was embed the HTML into the page activity and now I am able to view my videos. I had to do an HTML layout to get them to work.

 
Average of ratings: -
Gmads
Re: Embedding Vimeo Videos
Group Testers

Hi Freddie,

Yes, there are several ways to do this. I agree with you, defining an HTML layout certainly gives more control over the look and behaviour. I did that, both for a university and a high school I used to worked for, and the page looked better than just embedding the video.

 

--- edited

http://docs.moodle.org/27/en/Video

https://moodle.org/plugins/view.php?plugin=filter_vimeoembed

 

 
Average of ratings: -