HTML5 Video controls shrinking on page load - html

I need to integrate the HTML5 Video player in the page to run an MP4 video. This video is running within a carousel which on load does the slide width calculations, as the video original videos width managed through the CSS for with the width:100%.
The issue is when the page loads and the carousel initialises, the controls of the VIDEO do not expand full width of the video player. Once I click anywhere on the video, other than the play button, the control panel expands the full width, as it should.
BEFORE:
AFTER:

Related

html5lightbox video popup Mobile view Full screen issue

I am using HTML 5 light box popup for playing a video. i have been Calling video through web service from another website and stream into my player using html5-light-box popup using this method
html5Lightbox.showLightbox()
everything works fine but when viewed on mobile got to full screen video controls hide. when inspect element shown bottom of the video

Youtube embedded player video size issue

We have implemented embedded youtube player in our flash application which is written in action script 3.
We are facing a issue with the display of video. After clicking on play button the video size is displaying 1/4 of the display and shifting to the top left corner of the player display leaving the remaining space as blank.
Reference used for implementing embedded youtube player.
https://developers.google.com/youtube/flash_api_reference
Kindly suggest.
Thanks
From the Iframe API itself, in setting the player size, you should use this:
player.setSize(width:Number, height:Number):Void
It sets the size in pixels of the player. This method should be used instead of setting the width and height properties of the MovieClip. Note that this method does not constrain the proportions of the video player, so you will need to maintain a 4:3 aspect ratio. The default size of the chromeless SWF when loaded into another SWF is 320px by 240px and the default size of the embedded player SWF is 480px by 385px.
Or you can change the width and height value inside the . You can try it here.

How to increase width of modal window in mobirise?

I am using mobirise to develop interface for an Html website. In the gallery of mobirise, the videos are played by youtube by default. I have put mp4 videos instead to be played in a lightbox modal window of the gallery like this:
<div class="carousel-item">
<video src="videos\ocean.mp4" autoplay loop/>
</div>
The videos play fine but the width of the video doesn't increase. I have tried many options but none of them works. Can anyone tell me how to do this?
I guess that you use not a block with video background. If you use background video you, it's stretched all over the whole display. In this case, you can't use a music. After that, you can try to use small videos in the central part of a screenshot. It can't be stretched but you can listen to any music you want.
Please remember that you can bring any changes you want to your project manually after publication.

How can I get a video iframe to appear underneath a modal pop-up in Internet Explorer?

A client's site has a youtube video iframe and a modal pop-up window on the same page.
<iframe src="http://www.youtube.com/embed/xxx"></iframe>
(I have excluded irrelevant data such as width, height and frameborder specs).
All works well in every browser except Internet Explorer; here the iframe appears on top of the modal window when it is opened.
How do I stop this behaviour and force the iframe to appear under the modal like the rest of the page content?
The following needs to be included in the URL of the youtube video:
?rel=0&wmode=transparent
In context:
<iframe src="http://www.youtube.com/embed/xxx?rel=0&wmode=transparent"></iframe>

add overlay text on embedded youtube video, dissapearing while video plays

I've embedded a youtube video on my website and I want to add some overlay text that will dissapear when the play button is clicked and while the video plays. I want it to be compatible with all browsers (IE 7+).
(Would it be better to use YouTube's text adding functionality??)