CODEWITHSUNDEEP
javascript
Andy Lozano
Andy Lozano

Reputation: 3

Random Vimeo Video From Array

I'm not very familiar with code and am using squarespace to set up my website and just inject code I need or would like to use.

What I'm trying to do currently is embed vimeo videos on my cover page and have it randomly select a video from an array but I believe I might be doing something wrong as it doesn't seem to work. I've found information in regards to doing this with Youtube videos but perhaps it just doesn't work with Vimeo.

More than likely I've just missed something obvious.

Heres what I'm trying

var videos = [
    '238243092',
    '235209416',
    '187960907',
    '187960695',
    '187960573',
    '187960448',
    '187960364',
    '187960175',
    '187960026',
    '187959808',
    '187959623',
    '187959099',
];

var index=Math.floor(Math.random() * videos.length);
var html='<div class="embed"><iframe src="https://player.vimeo.com/video/ + videos[index] + " width="100%" height="100%" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
        </div>';
document.write(html);

Any help would be highly appreciated

Upvotes: 0

Views: 884

Answers (1)

NineBerry
NineBerry

Reputation: 28499

You are missing string delimiters. The syntax highlighting here on SO alone shows that in your case the + videos[index] + was part of the string literal and therefore not executed.

var html='<div class="embed"><iframe src="https://player.vimeo.com/video/' + videos[index] + '" width="100%" height="100%" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>';

Full working source code:

    var videos = [
        '238243092',
        '235209416',
        '187960907',
        '187960695',
        '187960573',
        '187960448',
        '187960364',
        '187960175',
        '187960026',
        '187959808',
        '187959623',
        '187959099',
    ];
    
    var index=Math.floor(Math.random() * videos.length);
    var html='<div class="embed"><iframe src="https://player.vimeo.com/video/' + videos[index] + '" width="100%" height="100%" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>';
    document.write(html);

Note that the video does not start playing here within the site for security reasons because of the way that the Stackoverflow code execution is implemented. The video plays in other contexts using the same code.

Upvotes: 1

Related Questions