The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Looking for help embedding video
smoketron
post Aug 13 2016, 12:16 PM
Post #1





Group: Members
Posts: 2
Joined: 13-August 16
Member No.: 24,584



Hi,

I'm using Brackets to try and build a site and embedding a vimeo video into a page. I'd like it to automatically play in full screen when the play button is clicked.

Here's a brief section of my code where I'm using an iframe:

<li class="video-container">

<iframe src="https://player.vimeo.com/video/171640925?title=0&byline=0&portrait=0" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

</li>

If I preview the page and click the play button, it will play in the page (not fullscreen) and there's the option to click on the fullscreen button. If I open the developer tools (in Chrome) and refresh the page, it will then work like I want it to. I click on the play button and it automatically opens in fullscreen mode and starts playing. Why will it only do this if I open the developer tools and refresh?

Does this have anything to do with the type of vimeo account that I'm getting the embed code from? I believe it's just the basic, free account.

Hopefully I'm explaining this right. Any help/suggestions are greatly appreciated.

Thanks!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Aug 13 2016, 02:07 PM
Post #2


.
********

Group: WDG Moderators
Posts: 9,628
Joined: 10-August 06
Member No.: 7



QUOTE(smoketron @ Aug 13 2016, 07:16 PM) *

I'd like it to automatically play in full screen when the play button is clicked.

I don't think that's possible in today's browsers. IE used to let you do it many years ago, but that feature was later removed.

I suppose you could resize the video to cover the viewport, but not remove the browser controls like when you press the F11 key.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
smoketron
post Aug 13 2016, 03:06 PM
Post #3





Group: Members
Posts: 2
Joined: 13-August 16
Member No.: 24,584



QUOTE(Christian J @ Aug 13 2016, 03:07 PM) *

QUOTE(smoketron @ Aug 13 2016, 07:16 PM) *

I'd like it to automatically play in full screen when the play button is clicked.

I don't think that's possible in today's browsers. IE used to let you do it many years ago, but that feature was later removed.

I suppose you could resize the video to cover the viewport, but not remove the browser controls like when you press the F11 key.




Thanks for the response. This is turning out to be more difficult than I thought.

What about something like this site: http://www.maxmoorefilms.com/

I realize these videos are filling the window and not fullscreen, but I like the effect. I looked at the code and see that it's an embedded vimeo link, but I'm can't figure out how it's automatically filling the screen when it's clicked.

Thanks again.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Feb 9 2017, 10:51 AM
Post #4


.
********

Group: WDG Moderators
Posts: 9,628
Joined: 10-August 06
Member No.: 7



QUOTE(Christian J @ Aug 13 2016, 08:07 PM) *

QUOTE(smoketron @ Aug 13 2016, 07:16 PM) *

I'd like it to automatically play in full screen when the play button is clicked.

I don't think that's possible in today's browsers.

Correction, it is: https://developer.mozilla.org/en-US/docs/We.../Fullscreen_API

Seems like the potential for abuse is huge: http://feross.org/html5-fullscreen-api-attack/ wacko.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 9 2017, 01:57 PM
Post #5


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



That didn't look very realistic, not even on my crap screen. tongue.gif

Also, K-mel didn't go into full screen mode. Iron and FF did.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
lisas
post Feb 27 2017, 10:51 PM
Post #6





Group: Members
Posts: 6
Joined: 27-February 17
Member No.: 26,328



Try this:

<video width="1920" height="1080" controls>
<source src="path to video\xxxxxx.mp4" type="video/mp4">

it will work without controls too. I edited my .mp4 to 1080x720 fills the screen not sure what the resolution is
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Feb 28 2017, 08:04 AM
Post #7


.
********

Group: WDG Moderators
Posts: 9,628
Joined: 10-August 06
Member No.: 7



QUOTE(lisas @ Feb 28 2017, 04:51 AM) *

I edited my .mp4 to 1080x720 fills the screen not sure what the resolution is

That will only work if the user has exactly the same window size (or resolution, in a maximized window). Fullscreen means it should adapt to the user's screen regardless of resolution.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Starfishht
post Apr 6 2021, 01:27 AM
Post #8





Group: Members
Posts: 2
Joined: 6-April 21
Member No.: 27,880



QUOTE(Christian J @ Feb 9 2017, 10:51 AM) *

QUOTE(Christian J @ Aug 13 2016, 08:07 PM) *

QUOTE(smoketron @ Aug 13 2016, 07:16 PM) *

I'd like it to automatically play in full screen when the play button is clicked.

I don't think that's possible in today's browsers.

Correction, it is: https://developer.mozilla.org/en-US/docs/We.../Fullscreen_API

Seems like the potential for abuse is huge: http://feross.org/html5-fullscreen-api-attack/ wacko.gif


Many thanks for that complete information!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Starfishht
post Apr 7 2021, 12:56 AM
Post #9





Group: Members
Posts: 2
Joined: 6-April 21
Member No.: 27,880



QUOTE(Christian J @ Feb 9 2017, 10:51 AM) *

QUOTE(Christian J @ Aug 13 2016, 08:07 PM) *

QUOTE(smoketron @ Aug 13 2016, 07:16 PM) *

I'd like it to automatically play in full screen when the play button is clicked.

I don't think that's possible in today's browsers. MyAARPMedicare Login

Correction, it is: https://developer.mozilla.org/en-US/docs/We.../Fullscreen_API

Seems like the potential for abuse is huge: http://feross.org/html5-fullscreen-api-attack/ wacko.gif


Nice tutorial! It is a very informative tutorial. It was extremely helpful.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 19th March 2024 - 04:31 AM