Prevent video from fullscreen display in iPhone

[John_Allred]

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>

[BKBK]

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>

[BKBK]

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

[John_Allred]

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>