Video player size on iPad

[crichard]

Is there a way to make the video player take up the full specified width (ie col-md-8) when viewed on an iPad? It looks fine in responsive mode on a desktop, but not on an iPad. (using WET 4).

[pjackson28]

@crichard Have you tried .col-sm-8?

[crichard]

I just tried it, and it doesn't work. See first screenshot with col-md-8, and second screenshot with col-sm-8. Here is my code:

            <div class="row"> 
                <section class="col-sm-4"><h2>News</h2>
                    <ul class="list-group" id="news_list">
                        <li class="list-group-item even">
                            <a href="http://pm.gc.ca/eng/news/2014/03/18/national-day-honour" rel="external">National Day of Honour</a>
                        </li>
                        <li class="list-group-item odd"><a href="http://pm.gc.ca/eng/news/2014/03/18/statement-prime-minister-canada-welcoming-home-members-canadian-forces" rel="external">Statement by the Prime Minister of Canada welcoming home members of the Canadian Forces</a></li>
                        <li class="list-group-item even"><a href="http://pm.gc.ca/eng/news/2014/03/12/statement-prime-minister-canada-lowering-canadian-flag-afghanistan" rel="external">Statement by the Prime Minister of Canada on the lowering of the Canadian Flag in Afghanistan</a></li>
                        <li class="list-group-item odd"><a href="http://news.gc.ca/web/article-en.do?mthd=advSrch&crtr.mnthndVl=4&crtr.mnthStrtVl=1&crtr.page=1&nid=826239&crtr.yrndVl=2014&crtr.kw=afghanistan&crtr.yrStrtVl=2002&crtr.dyStrtVl=1&crtr.dyndVl=8" rel="external">Final Canadian Troops Return Home After the End of Military Operations in Afghanistan</a></li>                     
                        <li class="list-group-item even"><a href="http://news.gc.ca/web/article-en.do?mthd=advSrch&crtr.mnthndVl=4&crtr.mnthStrtVl=1&crtr.page=1&nid=815779&crtr.yrndVl=2014&crtr.kw=afghanistan&crtr.yrStrtVl=2002&crtr.dyStrtVl=1&crtr.dyndVl=11" rel="external">Military decorations presentation ceremony</a></li>
                        <li class="list-group-item odd"><a href="http://news.gc.ca/web/article-en.do?mthd=advSrch&crtr.mnthndVl=4&crtr.mnthStrtVl=1&crtr.page=1&nid=824179&crtr.yrndVl=2014&crtr.kw=military+mission&crtr.yrStrtVl=2002&crtr.dyStrtVl=1&crtr.dyndVl=11" rel="external">Canadian Armed Forces completes military mission in Afghanistan</a></li>
                        <li class="list-group-item even"><a href="http://www.forces.gc.ca/en/news/article.page?doc=last-100-days-in-afghanistan/hpi3d3m0" rel="external">News Release - Last 100 days in Afghanistan</a></li>
                    </ul>
                </section>
                <!-- VIDEOS -->
                <section class="col-sm-8"><h2>Videos</h2>
                    <div class="wb-mltmd videoContainer">
                        <video poster="assets/ndh/statement-cds.jpg" title="The Canadian Armed Forces in Afghanistan">
                            <source type="video/mp4" src="assets/videos/cds-afghanistan-en.mp4" />
                            <track label="English" srclang="en" data-type="text/html" kind="captions" src="assets/videos/cds-afghanistan-en.xml"></track>
                        </video>
                        <p class="wb-share pull-right videoShare" data-wb-share='{"type": "video", "title": "The Canadian Armed Forces in Afghanistan", "url": "http://www.forces.gc.ca/en/video.page?doc=the-canadian-armed-forces-in-afghanistan/hsmwz4o8", "pnlId": "homeVideo"}'></p>
                    </div>
                    <br />
                    <p><a id="video_transcript" rel="external" href="assets/transcripts/cds-afghanistan-en.html">The Canadian Armed Forces in Afghanistan (transcript)</a>&nbsp;&nbsp;<span class="fa fa-external-link"></span></p>
                    <p>Visit the <a href="video-gallery.html">Video Gallery</a></p>
                </section>
            </div>

col-md-8

col-sm-8

[pjackson28]

@crichard The video takes it's dimensions from the parent container (so the wb-mltmd container). It looks like you are applying the width to the parent of that container leaving the wb-mltmd container to width auto. Try setting the width on the wb-mltmd container and see if that makes a difference.

[LaurentGoderre]

Actually it's not quite like that and i believe this might be a bug with the iPad. It was reported earlier.

[LaurentGoderre]

The video uses the resolution specifies on the video tag. If you specify a width and height of 600 x 480, it should preserve that ratio as it scales.

[crichard]

I get the same result.

<div class="row"> 
                <section class="col-md-4"><h2>News</h2>
                    <ul class="list-group" id="news_list">
                        <li class="list-group-item even">
                            <a href="http://pm.gc.ca/eng/news/2014/03/18/national-day-honour" rel="external">National Day of Honour</a>
                        </li>
                        <li class="list-group-item odd"><a href="http://pm.gc.ca/eng/news/2014/03/18/statement-prime-minister-canada-welcoming-home-members-canadian-forces" rel="external">Statement by the Prime Minister of Canada welcoming home members of the Canadian Forces</a></li>
                        <li class="list-group-item even"><a href="http://pm.gc.ca/eng/news/2014/03/12/statement-prime-minister-canada-lowering-canadian-flag-afghanistan" rel="external">Statement by the Prime Minister of Canada on the lowering of the Canadian Flag in Afghanistan</a></li>
                        <li class="list-group-item odd"><a href="http://news.gc.ca/web/article-en.do?mthd=advSrch&crtr.mnthndVl=4&crtr.mnthStrtVl=1&crtr.page=1&nid=826239&crtr.yrndVl=2014&crtr.kw=afghanistan&crtr.yrStrtVl=2002&crtr.dyStrtVl=1&crtr.dyndVl=8" rel="external">Final Canadian Troops Return Home After the End of Military Operations in Afghanistan</a></li>

                        <li class="list-group-item even"><a href="http://news.gc.ca/web/article-en.do?mthd=advSrch&crtr.mnthndVl=4&crtr.mnthStrtVl=1&crtr.page=1&nid=815779&crtr.yrndVl=2014&crtr.kw=afghanistan&crtr.yrStrtVl=2002&crtr.dyStrtVl=1&crtr.dyndVl=11" rel="external">Military decorations presentation ceremony</a></li>
                        <li class="list-group-item odd"><a href="http://news.gc.ca/web/article-en.do?mthd=advSrch&crtr.mnthndVl=4&crtr.mnthStrtVl=1&crtr.page=1&nid=824179&crtr.yrndVl=2014&crtr.kw=military+mission&crtr.yrStrtVl=2002&crtr.dyStrtVl=1&crtr.dyndVl=11" rel="external">Canadian Armed Forces completes military mission in Afghanistan</a></li>
                        <li class="list-group-item even"><a href="http://www.forces.gc.ca/en/news/article.page?doc=last-100-days-in-afghanistan/hpi3d3m0" rel="external">News Release - Last 100 days in Afghanistan</a></li>
                    </ul>
                </section>
                <!-- VIDEOS -->
                <section><h2>Videos</h2>
                    <div class="wb-mltmd videoContainer col-md-8" data-video-src="cds-afghanistan-en.mp4" data-video-title="The Canadian Armed Forces in Afghanistan">
                        <video poster="assets/ndh/statement-cds.jpg" title="The Canadian Armed Forces in Afghanistan">
                            <source type="video/mp4" src="assets/videos/cds-afghanistan-en.mp4" />
                            <track label="English" srclang="en" data-type="text/html" kind="captions" src="assets/videos/cds-afghanistan-en.xml"></track>
                        </video>
                        <p class="wb-share pull-right videoShare" data-wb-share='{"type": "video", "title": "The Canadian Armed Forces in Afghanistan", "url": "http://www.forces.gc.ca/en/video.page?doc=the-canadian-armed-forces-in-afghanistan/hsmwz4o8", "pnlId": "homeVideo"}'></p>
                    </div>
                    <br />
                    <p><a id="video_transcript" rel="external" href="assets/transcripts/cds-afghanistan-en.html">The Canadian Armed Forces in Afghanistan (transcript)</a>&nbsp;&nbsp;<span class="fa fa-external-link"></span></p>
                    <p>Visit the <a href="video-gallery.html">Video Gallery</a></p>
                </section>
            </div>