Could you kindly give me any tips for my problem that a video isn’t be shown up only in the iPad.
The problem is the following screenshot which the scenes haven’t been flowed but shown the black scene.
This page size is 1024px. I want to show video in this screen size although I have a plan to use a picture in
small size like 320px or 414px.
I am very glad if you show me ideas about this solution.
Regards,
Is the video within a rectangle? Or within an HTML widget? I recommend placing it within a regular rectangle if possible. This ensures that there is only one iframe, not two, to load the video.
What device sizes are you planning to support?
Dear Mr.Daniel.
Greetings.
Thank you for your quick response. I see. I haven’t cared about rectangle or HTML widget. I just place the video on the white edition board. I will try your suggestion to put the video within a regular rectangle.
I am planning to make 1024px,768px, 640px 414px and 320px as a responsive size. At least, I want to make the video function in 1024px and 768px.
Thank you very much for your advice. This is a big help.
Respectfully yours,
Yousuke
This is a super helpful tool for making a video responsive in your layout: http://embedresponsively.com
You place your Youtube video url within the box, and copy the resulting code into Hype within the inner HTML of a rectangle:
<style>
.embed-container
{ position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
</style>
<div class='embed-container'>
<iframe allowfullscreen="" frameborder='0' src='http://www.youtube.com/embed/QILiHiTD3uc'></iframe>
</div>Dear Mr.Daniel.
Greetings.
Thank you very much for your response again. I use the video which versions are ogv, webm, and mp4.
Is your solution code effective in this case?
Thank you very much for your advice. This is also big help.
Respectfully yours,
Yousuke
Dear Mr.Daniel.
Greetings.
Let me ask you about the way to upload the video on Hype pro again.
I tried your way to use the script code within the inner HTML of a rectangle and finally it was successful.
But it was only once. After twice, I came across the same problem that I couldn’t see video movie.
Since I noticed that the way you suggested yesterday was easy and effective, I want to adopt it.
At the present, I can’t see the movie on iPad as a trial attempt in Xcode.
The case I am facing is the below. I am very glad if you suggest any solutions.
Thanks.
Regards,
The youtube embed code does work. But for Hype it is always a good idea to force the css code to override what Hype wants.
You do this by adding !important; to the end of each style argument.
<style>
.embed-container {
position: relative !important;
padding-bottom: 56.25% !important;
/*padding-top: 30px !important; */
height: 0 !important;
overflow: hidden !important;
}
.embed-container-squarish {
position: relative !important;
padding-bottom: 120% !important;
/*padding-top: 30px !important; */
height: 0 !important;
overflow: hidden !important;
}
.embed-container iframe,
.embed-container object,
.embed-container embed {
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
}
</style>
If you are using a lot of the embeds. You may want to stick the css style in your Head file rather than every video embed. the embed would all be using the same class name embed-container
Dear Mr. MarkHunte.
Greetings.
Thank you very much for your suggestion.
I tried your way but after all I failed. Off course I can see the video in PC but I also want to see it in iPad or other smart phone. This is a part I have tried and failed over and over again. Now I manage to work this problem out
with the reference to comments in this forum.
So I have two questions.
①I found that there is “export area in video” in “file”, second option in upper part of Hype pro, different from “export as HTML” in same “file” area. Should I export the data including the video from here or export it from “export as HTML”?
②I don’t want to adopt ①way as much as possible because the data become heavy.
As in Mr.Daniel’s suggestion, I think that it is the best way to use Yutube video URL by uploading in Yutube.
But in this case, the problem was that the video didn’t flow automatically. The title character and push button necessarily showed up and it was not cool in appearance. How should I work this out to make it flow automatically?
I am happy if you suggest me other solution.
Best regards,
Yousuke
Hi sorry, I am a little confused by what you are after here.
The methode @Daniel suggests and with the important tag works. But it may be that there are differences with your videos that could cause a problem.
Posting link to one of them on youtube here may help use work that out.
Also on IOS you cannot have videos start to play automatically.