If you are requesting technical assistance with Twine, please specify:
Twine Version:2.0
Story Format: sugarcube
I have tried everything and I can’t seem to make it work… I have some mp4 videos which I want to put on some passages and to autoplay but for the YouTube videos I only want to add but not autoplay… help please…
For mp4 videos you will want to use the standard video html tag. Here’s an example from w3schools
<video width="320" height="240" controls autoplay>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
Two things to note. First, if you want the video to autoplay, you must not put it in the first passage (ie. the Start passage).
Second, if during testing you are using an mp4 video on your own computer rather than the internet, you will have to replace the https:// path with a file:// path. You should drag the video from your desktop into your browser and copy the URL from the title bar.
To embed a YouTube video, you can just copy and paste the embed code into your Twine game. This code is under every YouTube video via Share > Embed.
Thanks for your reply!
That is how I did it with the video from YouTube but it says it’s unavailable…
And for the mp4 video, is there a way I can make it fit on the whole page but still have space for 1 sentence which the player can click to continue to the next passage? The video is a motion graphics transition so I don’t really want to have the play button appear… I want it to be like an image… I hope this makes sense…Thanks in advance!
Some YouTube videos don’t allow embedding, have you tried it with a different one?
For the mp4 video…to remove the play button, just remove controls from the video tag.
There are various ways to stretch a video. The easiest is to just get rid of the height attribute and set the width to 100% like this.
<video width="100%" autoplay>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
If you are trying to make a transition, you might want to use the timed effect to make the story advance automatically when the video finishes instead of using a clickable link. For example, with a 3 minute video:
<<timed 180s>><<goto "this passage name">><</timed>>
You will probably want to increase the number to something slightly longer than the duration of your video to account for loading times. Unfortunately, you can’t be absolutely certain that players will see the entire video this way.
Thank you so much! Just a few more questions and hopefully I’ll leave you alone with my stupid questions 
If I only put width=100% the video doesn’t go on the whole space that is on the right of the screen (I kept the left sidebar) so that is what I would like to fit on that whole space on the right no matter if the player has the side bar expanded or hidden… Hope this makes sense…
And about ‘the account for loading times’ do you mean I should have like a StoryInit passage, that is for my audios to preload, so that the page has the video loaded by the time the player comes to this section? Really appreciate the responses!!
You can stretch the area that the passage text and video is shown in by adding this at the bottom of the video passage.
<style>
#passages {max-width: none; margin: -36px}
</style>
You should note that this might make the video too tall for the user to see.
As I understand it, Sugarcube does not have a way to preload videos in the way that it is able to preload audio. So what I meant was, if your video is 300s and if you choose to make a timed event, you should make the timed goto happen after 310s.
(If the player has connection issues and it takes more than 10s for the video to start, the video will still be cut off, though.)
@Hiev and @HanonO may know a way around this that I don’t know of.
Hmm… yeah it does stretch the video and doesn’t look good… Thank you anyways for your help!