Convert Vimeo <iframe> code into an URL that automatically plays on Shopify homepage - youtube

I'm in the process of adding a video that automatically plays to our Shopify store's homepage. Since the theme does only allow URL to the video, I tried to extract the URL with parameters from the embed code below to have the video play automatically.
URL that doesn't work:
https://player.vimeo.com/video/783962674?h=b8acf2d91a&autoplay=1&loop=1
Embed iframe code
<div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/783962674?h=b8acf2d91a&autoplay=1&loop=1" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>
Is there a way to get URL that autoplays the video just like the embedded code?
I picked up the parameters from Iframe and made this URL https://player.vimeo.com/video/783962674?h=b8acf2d91a&autoplay=1&loop=1

Related

How to embed all the Youtube channel-videos into website..?

I work on a site, I want to embed all the Youtube-channel-videos into my site.
I found similar post like this code that acutally worked fine and loaded all videos as desired for some time, but yesterday I saw that the channel-video-list didnt load, displaying only one video. What have happend? Has Youtube made any updates lately so the channel-videos wont load?
<iframe src="http://www.youtube.com/embed/?listType=user_uploads&list=FeetMinistries" width="100%" height="800"></iframe>
Thanks for all the help I can get.
André
you could try
Embed a video
On a computer, go to the YouTube video you want to embed.
Under the video, click SHARE Share.
Click Embed.
From the box that appears, copy the HTML code.
Paste the code into your blog or website HTML.
Embed a playlist
Sign in to your YouTube account on a computer.
On the left side of the page, select the playlist you want to embed.
Copy the playlist ID from the URL.
Modify the embed code for an individual video by doing the following:
In the place of the video ID (after "embed/"), substitute
"videoseries?list=".
Then paste the playlist ID after the "=".
Paste the code into your blog or website HTML.
https://support.google.com/youtube/answer/171780?hl=en
Consider following JQuery code snippet I'm usually using to dynamically load channel by channel Id.
$.ajax({
url: "https://www.googleapis.com/youtube/v3/playlists",
type: 'get',
dataType: 'json',
data: {
part : 'snippet',
channelId: <channel_id>,
maxResults : 50,
key: '<API Key>',
},
success: function(data) {
}
});

Embed Twitter Percent-encoding

I was trying to copy the same method to my website by using the below code, but when I implement other twitter user or account, it is not working. Can anyone check if the code format is still working in other Twiiter account?
<iframe border=0 frameborder=0 height=250 width=550 src="https://twitframe.com/show?url=https%3A%2F%2Ftwitter.com%2Fjack%2Fstatus%2F20"></iframe>
I created a JSFiddle and looks like the code is working fine! Tested with two other users and both are loading fine. You have to check if your URL is properly encoded and if you have any adblockers that blocks social media features.
Link: https://jsfiddle.net/ftcz6pdu/4/
Sample code:
<iframe border=0 frameborder=0 height=250 width=550 src="https://twitframe.com/show?url=https%3A%2F%2Ftwitter.com%2FItsSkyLOL%2Fstatus%2F1011166507257270273"></iframe>
<iframe border=0 frameborder=0 height=250 width=550 src="https://twitframe.com/show?url=https%3A%2F%2Ftwitter.com%2FPoppyHarlowCNN%2Fstatus%2F1010899818955333632"></iframe>
The online URL encoder that I used: https://meyerweb.com/eric/tools/dencoder/

Stream from S3 a MP4 video file from a Grails controller to a video.js player

I have an issue trying to stream MP4 video files from Amazon S3 through a grails controller. I would like to host a video file on S3 and stream it (or send it) through a grails controller, that will be accessed by the front end that is a video.js player in a html page.
I need to keep the videos on S3 private, so just making the video public on S3 and using a direct url is not possible. Any help is appreciated.
Controller:
def video = {
def s3 = amazonWebService.s3
def file = s3.getObject(params.bucketName, params.key)
response.status = 206
response.contentType = "video/mp4"
response.outputStream << file.objectContent
response.outputStream.flush()
response.outputStream.close()
}
Video (GSP frontend):
<video id="example_video_1" class="video-js vjs-default-skin"
controls preload="auto" width="640" height="264"
poster="http://video-js.zencoder.com/oceans-clip.png"
data-setup='{"example_option":true}'>
<source src="${createLink(controller:'home', action:'video', params:[bucketName:bucketInstance, key:videoFileInstance])}" type='video/mp4' />
</video>
You don't need to download the video.
Use the AWS Java SDK, get pre_signed URL for the video, using your bucket and key details. If your video is not of confidential nature, you can also create get a public URL for the video.
Use that pre-signed URL in the place of the SRC.
The video would still not play correctly in all the browsers, because you are having only one format MP4 in your video, which is not supported in all the browsers. You would need to upload the webm format as well to S3 and provide the URL for it in the videojs SRC for that format. For this you can use AWS video encoder, or you can use ffmpeg to do the conversion.
Finally you would be able to play the video in all the major browsers.
Hope this helps.

UIWebview is not loading youtube videoes in iFrame

In my app I am using UIWebview to Load Html string which is having Text,Image Url and Videos in iFrame.This was working fine till now but recently I came to know that text and image url are loading fine and the video is not loading.I am just getting the blank space which I have allocated for the video but no sign of video.
The video iFrame which I am getting is this:
<iframe width="100%" height="" src="//www.youtube.com/embed/bhRqrw82P3A" frameborder="0" allowfullscreen></iframe>
Please suggest if something has changed in API.
See this difference:
src="//www.youtube.com/embed/bhRqrw82P3A"
src="http://www.youtube.com/embed/bhRqrw82P3A"
If you want to use first one you have to add "http:" into your URL to make it valid link. You can do it very easy by adding some base URL when loading HTML string into UIWebView
NSURL *baseURL = [NSURL URLWithString:#"http:"];
[self.contentWebView loadHTMLString:myHTMLCode
baseURL:baseURL];
<iframe src='http://www.youtube.com/embed/bhRqrw82P3A?modestbranding=1&showinfo=0&fs=0' width='300' height='175' frameborder='0' >
</iframe>
http://jsfiddle.net/tx77b/
//www.youtube.com/embed/bhRqrw82P3A uses scheme depends on server (http or https...etc).
In local HTML it will point to file://www.youtube.com/embed/bhRqrw82P3A.
I make a fake http host for loading:
[webView loadHTMLString:yourHTMLCode baseURL:[NSURL URLWithString:#"http://localhost"]];
This works for me.

Download from brightcove URL button

I am creating a site that utilizes videos that are hosted on brightcove so that our sales team can access these and post them to other retail sites. I have included a Download URL text area on the page that give the long URL of the selected video that if pasted into the browser, one can save the video as straight to their computer. I am needing to created a button that when clicked will automatically bring up the save as window on a persons computer so that it can be downloaded, or just a download button that will automatically start a download will work. Any suggestions?
pradcomedia.com/brightcove/videomanager.html
<div>
<textarea id="divMeta.render" style="height:75px; width: 225px; resize: none;"></textarea>
</div> </br>
function urlLink(id){
document.getElementById('divMeta.render').innerHTML = url;
var link = window.open;
//renditions Metadata
document.getElementById('divMeta.render').innerHTML = url;
As long as the end users are using browsers that support the download attribute then you can just use that
<a href="http://example.com/video.mp4" download>Download me</a>

Resources