Prevent video from fullscreen display in iPhone

Contributor ,
Jan 04, 2021 Jan 04, 2021

Copy link to clipboard

Copied

Hi!

I hope nobody minds, this is not strictly a Coldfusion issue. But I like my chances here better than in any of the other, more general forums. I'm trying to embed a video in a div on my site's homepage. Whether I use the iframe embed code that YouTube provides, or create it as an <object>, the video will play, embedded, within the div for all screen sizes but my iPhone screen. In that case, it zooms to fullscreen when the video starts, and I can click the control on the video as it's playing to force it back into the div. You can view/test this behavior at  https://test.aptmaps.us/index_video.cfm. This is just a borrowed video, so it doesn't relate to the site's content.  I've searched for an <iframe> or <object> method that might force the video to play "minimized," but I can't find anything. Anybody know the trick I'm missing? Thanks!

 

The code I'm using is either of the two following below. FWIW, I'm incorporating bootstrap styling, so the divs will adapt to the viewport, and I've tried every value from 1-12 for the small screen class. I couldn't figure out how to get the video to play using the HTML5 video tag. Might that be the answer?

 

<!--- [7] BEGIN #NAVBLOCK PANEL [Video] --->
<div id="Video" class="navPanel col-lg-6 col-md-8 col-sm-12" style="margin-top: .5em; padding: 0px;">
This is an explainer video
<iframe width="90%" frameborder="0"
     src="https://www.youtube.com/embed/h5OPUCMFNlQ" allowfullscreen="false">
</iframe>

<!--- 
<object>
    <param name="movie" value="https://www.youtube.com/embed/h5OPUCMFNlQ"></param>
     <embed src="https://www.youtube.com/embed/h5OPUCMFNlQ" type="application/x- 

       shockwave-flash" allowscriptaccess="always" allowfullscreen="false" width="200"

       style="padding: .2em;"></embed>
</object>
 --->
</div>

TOPICS
Advanced techniques

Views

92

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jan 06, 2021 Jan 06, 2021

Copy link to clipboard

Copied

Try using the class that implements Aspect Ratio. Something like

<!-- Aspect Ratio = 4:3 --> 
<div id="Video" class="embed-responsive embed-responsive-4by3" style="margin-top: .5em; padding: 0px;">
<iframe width="90%" frameborder="0"
     src="https://www.youtube.com/embed/h5OPUCMFNlQ" allowfullscreen="false">
</iframe>
</div>

<!-- Aspect Ratio = 16:9 --> 
<div id="Video" class="embed-responsive embed-responsive-16by9" style="margin-top: .5em; padding: 0px;">
<iframe width="90%" frameborder="0"
     src="https://www.youtube.com/embed/h5OPUCMFNlQ" allowfullscreen="false">
</iframe>
</div>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jan 07, 2021 Jan 07, 2021

Copy link to clipboard

Copied

Did you try the suggestion, @John_Allred ? If so, any joy?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Jan 08, 2021 Jan 08, 2021

Copy link to clipboard

Copied

LATEST

BKBK,

 

I went with the following for now. I'm having issues related to using a video on a remote site. I'll invest more learning time on that topic later. 

 

Thanks for the response!

<video width="90%" controls="play" controlslist="nodownload" playsinline autoplay poster="/media/path_to_briq.mp4" id="Explainer_Video">
	 <source src="https://vimeo.com/497696794" type="video/mp4">
	 Your browser does not support the video tag.
</video>

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines