Select several video from drop down menu and further options

[gian carlog61267382]

Good evening,

1) I have a lot of different responsive video that I need to select and perform im my web page.
It could be the right solution to have a drop down menu from which to choose them and start they in the same player.
This is to try not to have a web page with an exorbitant number of players.
At my level the script is like this:
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="MyVideo.mp4"></iframe>
</div>
Is there a vay to do what i need?
2) the player has a download option. Is there a way to disable this option?
3) the responsive player has a black background. Is there a way to disable this background?

Many thanks!

[Nancy OShea]

Where are your videos hosted?

I ask because you DO NOT need an <iframe> unless you're pulling videos from a 3rd party sharing site like YouTube or Vimeo.

[gian carlog61267382]

Thank you Nancy,

this is by default in the insert bootstrap component.
May I could arrange the script without it if it could be better.

[Nancy OShea]

You didn't answer my question.  Where are your videos hosted?

If they're on YouTube, use the YouTube Player API

https://developers.google.com/youtube/player_parameters

If they're on Vimeo, consult Vimeo's documentation.

https://developer.vimeo.com/api/guides/start

https://developer.vimeo.com/player/sdk

If you're self-hosting videos on your own server, get a player that supports a playlist:

https://www.wimpyplayer.com/

[gian carlog61267382]

Sorry Nancy It is hosted in my web space, not YouTube or Vimeo.

[osgood_ · Accepted solution]

You seem to be implying you would be happy with a <select> list on your page where a video could be chosen from a list?

If so you could easily implement that by adding a select list to your page (the select code below assumes the videos are stored in your websites folder in a folder named 'videos'.

<label for="videoList">Choose a video:</label>
<select name="videosList" class="videoList" id="videoList">
<option value="videos/boat.mp4">Boats</option>
<option value="videos/roses.mp4">Roses</option>
<option value="videos/cat.mp4">Cat</option>
<option value="videos/storm.mp4">Storm</option>

</select>

Then add the javascript below at the very bottom of your page, directly before the closing </body> tag:

<script>
const videoList = document.querySelector('.videoList');
const embedded = document.querySelector('.embed-responsive-item');

videoList.onchange = function() {
const selected = videoList.value;
embedded.src=selected;
}

</script>

This will have the effect of swaping the src in the iframe ALTHOUGH you dont need the iframe, you could just use the 'video' tag (see below). Both options, iframe is commented out.

<div class="embed-responsive embed-responsive-16by9">
<video class="embed-responsive-item" src="videos/boat.mp4" controls autoplay type="video/mp4"></video>
<!-- <iframe class="embed-responsive-item" src="videos/boat.mp4"></iframe> -->
</div>

[gian carlog61267382]

Thank you both but particularly to Osgood, this was what I exactly need!!

A secondary detail: I can add "controls controlsList="nodownload" to avoid the download of my video files, but this not work with the right mouse click.
I there a way to avoid the right mouse click or to avoid the "save video as" after the right mosue click?
Thank you very much again!!!

[Nancy OShea]

If you're concerned about people taking your content, don't post it online.  Owing to how the Internet works, you can't prevent people from accessing your media files.  When people click the play button, the file is automatically downloaded to their device's browser cache.  It's there for anyone who wants it.  In addition, people can find the video in your source code and grab it that way.  So disabling right-click is NO SOLUTION.  It doesn't protect anything.

[gian carlog61267382]

Thank you again Nancy, I imagined it it but i preferred to ask.