When I attempt to embed a YouTube video as an IFRAME, the video dimensions always appear too small within the video frame when the video plays as HTML 5 Video. It looks fine when viewed in a browser with Flash enabled.
I'm wondering if there's some sort of workaround (that doesn't require Flash)?
The following jsFiddle demonstrates this problem. I've appended "html5=1" to the iframe src URL, which forces the video to play with HTML 5 in Chrome; Firefox seems to ignore the parameter so you'll have to disable Flash to see it.
Here's the jsFiddle:
http://jsfiddle.net/DML2T/
And here's the code you'll find there:
<iframe id="videoPlayer1" width="640" height="360" src="//www.youtube.com/embed/5Rxqv2pYS_U?autoplay=1&html5=1"></iframe>
Related
I want to insert a video into my HTML page with the video tag. Here is my markdown (I am developing an ASP.NET MVC application, and symbol ~ means project root):
<video controls>
<source src="~/show.mp4" type="video/mp4">
Cannot load the video.
</video>
But it just shows white space with video controls. Here is a screenshot:
And the slider in the video controls does not move (i.e. the video is not playing), although the "pause" icon is shown, which should mean: the video is playing.
What I have tried
Adding src attribute to video tag.
Opening the menu in the right of video controls panel and clicking "Download". It downloaded my video. When I played it with Windows Media Player, it showed exactly what I have recorded.
Removing type attribute from source tag.
Removing source tag (and leaving only src attribute in video tag).
Moving the slider in video controls panel. Still white space.
Setting controls="controls" in video tag.
Surfing the Internet (including Stack Overflow).
Now I asked my own question.
When I copy past iframe tag provided by Google Drive for embedding a video:
<iframe src="https://drive.google.com/file/d/1A7Q8Ho-0TCaGjkVU2295SaPBDLXBGPK/preview" width="640" height="480"></iframe>
It gets rendered something like this:
How can I change the thumbnail (that is the video image behind play button above) which is shown in embedded video?
I know this question may have been asked before, but no good answers were found while I was searching.
I have a website where I want to add a YouTube video. The goal is to have an autoplaying video with sound on. A lot of users recommended using the html tag iframe to embed it, which seemed to work perfectly with autoplaying except for the sound.
Does anyone know a better solution to this? Would it be better to just upload the video to the server and use the video tag?
<iframe
width="100%"
height="100%"
src="https://youtube.com/embed/h4gr8eH7D?autoplay=1&controls=0&showinfo=0&autohide=1&mute=1&playlist=h4gr8eH7D&loop=1"
allow="autoplay"
></iframe>
Supposedly they updated using autoplay=1 to where it had to have mute=1 which makes autoplay work, but with no sound. I saw somewhere someone had used mute=2 to have the audio working, but that didn't work for me either.
The new versions of Chrome prevent any audio from running on a webpage until the user interacts with the page. You CANNOT auto-play a video in a chrome browser unless it's muted and this also applies to videos which you upload to your server. If you'll make the user interact with your page before playing audio, you'll be able to play it.
See also How to make audio autoplay on chrome.
I have a simple HTML5 video embed that displays a blank (white) frame when loaded on iOS. On desktop browsers (including Safari) and Android the first frame of the video is displayed.
I understand that you can avoid this by setting an explicit poster image, but I'm hoping I can avoid having to set up a transcoding service to extract the first frame of the videos. I understand that Apple has probably chosen this route to limit the bandwidth use for mobile users, but in this instance it's just overkill to set up a transcoding service.
I've played around with the preload attribute, but neither setting it to
auto or metadata works. Is there any other way to display the first frame of the video without interaction from the user?
Here is a link to a pen where I am illustrating the problem.
https://s.codepen.io/webconsult/debug/oRmQva/vWMRwadNoNvr
And here is a screenshot of how the code is rendered on iOS simulator (same on real hardware) and in Chrome respectively.
You can use Media Fragments URI
Just Append #t=0.1 to the end of the video URL
Try following code. This is work for me
<video src="video/video.mp4#t=0.5" playsinline controls preload="metadata">
<source src="video/video.mp4#t=0.5" type="video/mp4">
</video>
I have a jsfiddle here - http://jsfiddle.net/fzzgjem4/2/
I'm using the video tage to show a vimeo video.
I would normally use the iframe from vimeo but I want it full width and without the vimeo controls.
I'm getting the src from 'Use your own player section' in vimeo.
The video will come from a CMS so I just want to be able to add the id for the video.
The jsfiddle does not work in Firefox.
Is this becasue it's the wrong format?
Is it possible to use the video tag to show vimeo videos
<video src="http://player.vimeo.com/external/85569724.sd.mp4?s=43df5df0d733011263687d20a47557e4" autoplay muted></video>