Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn More

View all

Sign in to view all badges

Video/Html/iOS

Avatar

Avatar
Validate 1
Level 1
Sophie_HH
Level 1

Like

1 like

Total Posts

19 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Boost 1
View profile

Avatar
Validate 1
Level 1
Sophie_HH
Level 1

Like

1 like

Total Posts

19 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Boost 1
View profile
Sophie_HH
Level 1

15-02-2016

Hi all,

Is there a way to force the video to play in a dedicated space in my page instead of having it automatically play full screen?

At the moment, when I press Play it launches itself full screen but my client wants it to stay in a small space so users can still view the content below the video. If I try to reduce the video, it stops playing.

Here is the code for my video:

<video width="955" height="540" id="crisis-vid" title="XXXXX" poster="img/video-poster.png" controls >

                <source src="img/xxx-v3.mp4" type="video/mp4" />

                <p>XXX</p>

              </video>

I have some css in it but it's only positioning and sizing in.

Also, iOS is automaticcaly placing a "Play" button on top of video. Is there a way to remove it?

Thank you,

Sophie

Accepted Solutions (0)

Answers (1)

Answers (1)

Avatar

Avatar
Boost 5
Level 2
jerwarren
Level 2

Likes

5 likes

Total Posts

30 posts

Correct Reply

1 solution
Top badges earned
Boost 5
Boost 3
Boost 1
Applaud 5
Affirm 1
View profile

Avatar
Boost 5
Level 2
jerwarren
Level 2

Likes

5 likes

Total Posts

30 posts

Correct Reply

1 solution
Top badges earned
Boost 5
Boost 3
Boost 1
Applaud 5
Affirm 1
View profile
jerwarren
Level 2

16-02-2016

On iPhone, videos always play full screen.  On iPad, however, you can get them to play inline.  This is an iOS limitation, not a DPS limitation.

If you want to hide the play button, you can do something fancy with your css like this:

video::-webkit-media-controls {
  display
:none !important;
}