I'm trying to create a video pop-up that works on Apple devices and I've been playing around with fancyBox & some YouTube videos. Because YT uses Flash, this isn't going to work (which I am just now realizing)
Is there a way to open up an html5 video inside of this pop-up?
I already set that part up:
Here's the page where I'm already using fancyBox: http://legal-replay.com/video-test/
Please help!
<a class="iframe" src="http://www.youtube.com/embed/dP15zlyra3c?html5=1">Open HTML5 Video</a>
I don't know much about fancybox but it looks like you can just have it open any iframe you want, which will work with YoutTube's default embed method. Just pass html5=1 to the iframe.
From what I can tell scouting around stackoverflow, this is only supported for single videos, I don't know if you can force an entire playlist to use HTML5, that might still be a client-preference.
Source
Fancybox Howtwo
Related
I would like to know how can I add an image in html when you load a vimeo video ?
Any informartion, links related or codes are welcome.
Thank you!!!
I guess you are talking about how to add a poster-like utility for Viemo videos, as done trough the poster HTML attribute when placing HTML5 videos.
Well, there's no such an option, as far as I know. When Vimeo is not active (as it has not been played yet) the video's thumbnail image is displayed, and when Vimeo's video is loading, it shows it's own loading animation.
Anyway, you can select your custom image when uploading your video on Vimeo, so, at least, by this way you can define what will be showing by default your custom player.
I'm doing a simple iframe embed with YouTube videos on a website which is going to be viewed on mobile and desktop. The code I'm using to embed videos is this:
<iframe src="https://www.youtube.com/v/VIDEO_ID"></iframe>
I was under the impression that a HTML5 player would be served if Flash wasn't available, however when I debug this on a mobile the video is being served in Flash and not working.
Am I using the wrong URL or are there extra things which need to be done to embed the video properly? I've noticed that you can do an iframe embed using JavaScript too.
Here is the actual problem that occurred in your case.
When you embed a youtube video with the following code <iframe src="https://www.youtube.com/v/VIDEO_ID"></iframe>
a flash player is actually loaded. In this case your mobile doesn't support flash.
To rectify this issue you can use an HTML5 player which has the following structure <iframe src="https://www.youtube.com/embed/VIDEO_ID"></iframe>
You can use this youtube code generator for generating customized player embed code.
Somehow I ended up using the wrong URL, for iframe embedding you must use: http://www.youtube.com/embed/VIDEO_ID
https://developers.google.com/youtube/iframe_api_reference
I need help writing code for my site that will enable me to create a video popup of a youtube video on my website. I would like to use html5 not flash or JS. That being said I can't seem to find any code samples to digest. I will keep looking but if you have any ideas to
create a html 5 popup for a youtube video
not using JS or Flash.
You could use a :target event with CSS to show a popup container.
Working Example:
http://jsbin.com/csspopupyoutube/2
I have made a windows store app using the Youtube Iframe API. I can handle events and play video fine but there is a major problem as it doesnt support full screen mode (amongst some other minor niggles).
I have been looking in the app store and I see that the majority of youtube player apps do not use the iframe API, they grab the video direct and put it into the standard HTML5 video player.
I have done a lot of searching and the only way I can see people are doing this is by parsing the youtube page to find the video file the Youtube player is going to play and loading this directly into the media player.
I have a few problems with this method.
I am not sure if this is legal as it may break youtubes terms and conditions
If page at youtube changes it can break app.
Neither of these situations are acceptable.
Is there any way to get full screen to work inside app or get a direct video stream legitimately?
Not sure about the copyright and youtube terms stuff but here is how you do it apparently:
Show Youtube video source into HTML5 video tag?
Looks like it's browser specific and youtube generates different html for different browsers.
I would make an ajax request to the youtube url appending html5-true then use jQuery to scrape the source for the video tag, add your attributes and then append to your page.
Now you have the tag that youtube uses so I'm assuming what works on their webpage will work o yours.
Probably violates all terms and conditions...
I have a question. I know youtube has supported html5 for some time, so I just tried disabling the adobe flash plugin and took a look at the page source. I found no video tag. Could anybody explain that?
Using chrome, after disabling Flash, I do get a warning when trying to watch videos ("You need Flash!"), but it detects that I don't have flash, and uses the HTML5 version instead. If you use Chrome, you can look at the DOM with the developer tools (F12), and you'll indeed find a video tag in the video-container div, e.g.
<video class="video-stream" x-webkit-airplay="allow" src="http://o-o.preferred.twtelecom-dfw1.v15.lscache5.c.youtube.com/videoplayback?sparams=cp%2Cid%2Cip%2Cipbits%2Citag%2Cratebypass%2Csource%2Cexpire&fexp=900161&itag=43&ip=207.0.0.0&signature=55FCBF36A597656FECBEC8E78051B3BD30EE8D97.8F8D573710D767EAF4429FBC54C940DF7611A1BE&sver=3&ratebypass=yes&source=youtube&expire=1330650696&key=yt1&ipbits=8&cp=U0hSRVZQTl9OUENOMl9OSlJHOlBlcHJOMW9PSHhH&id=381980b5e867a1c5" data-youtube-id="OBmAtehnocU"></video>
For almost everything Google does on the web they use javascript. Most likely what is happening is that they test the browser to make sure it supports HTML5 video, they then load the the video dynamically using javascript.
To verify, use a web browser tool to inspect the current html as it's shown, not as it's sent to the browser.
And as Marius noted, be sure to have HTML5 enabled