I'm curious to what the best practice is in regards to embedding youtube videos on a site? Ideally I will want to auto-play a default video with it muted while having other videos available as thumbnails.
Any recommended plugins? Should I use an iframe or an object?
Thank you in advance!
Your question is very broad: it's hard to know how to help you. If you're using WordPress, for instance, you'll have some plugins to help you do this, but otherwise it depends on whether you intend to dynamically generate the videos or manually create a page with the main video and thumbnails chosen by you in advance.
If you intend to program your page, you'll want to use the YouTube Data API (version 3 preferably, which uses JSON to keep payload sizes down).
If you're manually laying the page out, look at the watch page for a YouTube video, and you can get the embed code there. Click 'Share -> Embed' and then you'll see an iframe tag from which you can fiddle with to alter the size parameters to suit your needs.
One thing to note though: if you make a video autoplay on a page, as far as I know you forfeit the opportunity to have the viewcount increase for that video. So if you want to promote one of your own and intend the viewcount to go up each time, you have to allow users to start the video.
Related
I have videos on my website that are taking very long to load.
I don't think it is my webhost since it also happens on localhost.
Each time there is only 1 video shown to the user, depending which category they chose. (So it is not loading each video always).
The videos that take longer to load are the bigger ones (the biggest one is about 351MB video file)
This is my html code for the video:
<div class='video'><h2>$vidTitle</h2><video width='640' height='360' controls preload='metadata'><source src='$viddir' type='video/mp4'></video></div>
I've also read that it could be that the video indexing could be at the end, could this be the case?
What can I do about this, do I need to use another player thann the default html5 player (I tried this but it didn't really help) | do I need to use a cdn?
How can I solve this?
Thanks!
My understanding is that the preload='metadata' attribute in your video element is supposed to prevent the video from loading.
You could try preload='none' to test. I know that works.
As always, a good place to check is MDN web docs:
mdn web docs : The Video Embed element
A while ago I stumbled across an example of an HTML5 video player with support video in video. In an example use case, the following was demonstrated: a powerpoint presentation video, with an explainer video to accompany it. Unfortunately I can't remember which video player it was.
To illustrate; something like this
The beauty of the player is that it's able to serve multiple sources of video in one view and toggle between different view points (like split screen and switched view).
Like I have illustrated here:
Split screen video
Switched video view
Could anyone help me find out which HTML5 video player it may have been, or maybe how this could be achieved in something like VideoJS?
It looks from your requirements that these are completely separate videos.
If this is the case then one simple approach is to just have two video players.
You can then use your web page layout to place them wherever you need them to start up, and add some simple Javascript scripts, linked to buttons on the page for example, to change the layout to however you want it for that particular button (e.g. one button might be for split screen).
How does one insert a video in a manner done in websites such as http://www.leadpages.net? where the video plays the moment the site is loaded and auto replays without any play buttons/full screen options/etc. It behaves in a way similar to that of gifs
My site uses wordpress/divi theme
WordPress comes with a cool feature called auto-embed. It can automatically get the embed code for video from video sites like YouTube and many more.
All you need to do is paste the video URL into the post editor. Make sure that the URL is in it’s own line and not clickable (hyperlinked), and that you are using the visual editor :)
I need to embed a youtube video into my site but I need to allow certain people to be able to change the video that is shown without them going into code, How would I do this?
Another thing that could help is how could I automatically embed someones latest video onto the site.
If anyone can answer any of these thank you.
For adding a YouTube video without going into the code you could look at Google Tag Manager or a similar service. For embedding the latest video you might need to look at a YouTube API or similar to pull in the latest videos url.
I want to embed videos from different video sites like YouTube, Vimeo and so on...
But I have a problem:
The Skins of the players are all different
and I want a consistent video skin.
Is there any possiblity to get this work?
I can't host the videos on my server because I have to pay for the traffic
and that would make me poor =(
I know that Youtube at least has a chromeless player, you can check out the API here: http://code.google.com/apis/youtube/js_api_reference.html#GettingStarted
I don't know about any of the other sites, though. I'd try Googling the name of the site and "chromeless" or "api" to see what comes up.
Simply put, no. The video site content has to include the skin for each site, unless you rip the video out and self-host it.
There's a reason for this, and I doubt you'd want to see the sites all fold/go paid because of people hijacking content without attribution.
Try Media Element JS
It wraps your youtube and vimeo video to a HTML5 video, no need to host the video on your website. The script from the website can take youtube and vimeo videos and make convert them into HTML5 video.
One side effect of this script is that since it can convert both Youtube and vimeo videos to HTML5 then the players will be the exact same for both of them.
Hope that helps,
regards