Prevent video from fullscreen display in iPhone
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>
