I am trying to embed a list of YouTube videos into a website. The videos don't belong to a particular playlist as such. Random videos will need to be played one after other.
According to this article this is possible with the playlist property:
playlist (supported players: AS3, HTML5)
Value is a comma-separated list of video IDs to play. If you specify a value, the first video that plays will be the VIDEO_ID specified in the URL path, and the videos specified in the playlist parameter will play thereafter.
However my code doesn't seem to work. Here's what I've tried
<iframe id="ytplayer" type="text/html" width="640" height="390"
src="http://www.youtube.com/playlist?playlist=PHi4tFz-F0g,HcKrd3K8_A,9fAZIQ-vpdw"
frameborder="0" />
<iframe id="ytplayer" type="text/html" width="640" height="390"
src="http://www.youtube.com/embed/PHi4tFz-F0g?autoplay=1&playlist=PHi4tFz-F0g,HcKrd3K8_A,9fAZIQ-vpdw"
frameborder="0" />
I tried putting the video ids list (PHi4tFz-F0g,HcKrd3K8_A,9fAZIQ-vpdw) at the demo page here, but it doesn't work.
I've figured this out, it was just the documentation being confusing:
you can pass the list of video ids, but it has to be a single comma seperated string, not an array
e.g.
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'dwM78wnqYK0',
playerVars: {
'playsinline': 1,
'controls': 1,
'playlist': "PHi4tFz-F0g,HcKrd3K8_A,9fAZIQ-vpdw"
},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
Related
I'm writing a presentation using Xaringan. I want to embed video such that when I transition to the slide containing the video it plays automatically in fullscreen. (i.e., I do not want to have to click on the video to play it).
I could achieve what I want using revealjs with:
## {data-background-video="my_video.mp4"}
but I've spent about 30 hours writing the presentation in Xaringan, including some custom css styles (I'm a complete css novice) so I don't want to convert to revealjs (especially as I haven't used revealjs other than to test the above).
Is there an equivalent in Xaringan? Given it's based on revealjs I assume it's possible but despite many hours on the internet I can't work out how.
Alternatively, is there a way to activate non-fullscreen video from a keyboard press. For example, like an incremental step that plays the video:
This doesn't work. It plays the audio upon a keypress but not the video:
---
--
<video width="100%" height="100%" controls>
<source src="media/my_video.mp4" type="video/mp4">
</video>
---
This plays the audio at the start of the presentation (not from the slide I want) and there's no video (possibly because I have a background image set up on the first slide):
<video width="100%" height="100%" autoplay>
<source src="media/my_video.mp4" type="video/mp4">
</video>
Thanks to #pat-s and the pages to which he linked, I have this working. In case it helps others, here's a working minimal example that autoplays audio and video (in fullscreen) upon slide transition.
The R Markdown is:
title: "Video Example"
author: "Andy Field"
output:
xaringan::moon_reader:
css: ["default", "my_styles.css"]
includes:
after_body: "afterInit.html"
---
# Minimal example of autoplaying audio and fullscreen video
## Andy Field
```{r setup, include=FALSE}
options(htmltools.dir.version = FALSE)
```
---
class: inverse
background-image: url("http://www.metalmusicarchives.com/images/covers/dio-killing-the-dragon-20160817062111.jpg")
background-size: cover
<audio controls>
<source src="http://www.discoveringstatistics.com/repository/misc/dio_killing_the_dragon.mp3" type="audio/mpeg">
<source src="http://www.discoveringstatistics.com/repository/misc/dio_killing_the_dragon.ogg" type="audio/ogg"/>
</audio>
.center[Here's the audio.
It is a song by the band Dio.
Like many of their songs, it involves a dragon.
Next up, video.]
---
layout: false
<video width="100%" height="100%" controls id="my_video">
<source src="http://www.discoveringstatistics.com/repository/misc/shrek_burp.mp4" type="video/mp4">
</video>
Note that the YAML includes a reference to a file called "afterInit.html", which (in this case) is stored in the same directory as the markdown. This file contains the following:
<script type='text/javascript'>
var slideElements
function getElementForSlide(slide) {
slideElements = slideElements || document.querySelectorAll('.remark-slide')
return slideElements[slide.getSlideIndex()]
}
slideshow.on('showSlide', function (slide) {
Array.from(getElementForSlide(slide).querySelectorAll('video, audio')).forEach(function (vid) {
vid.loop = false
vid.currentTime = 0
vid.play()
})
})
slideshow.on('hideSlide', function (slide) {
Array.from(getElementForSlide(slide).querySelectorAll('video, audio')).forEach(function (vid) {
vid.pause()
})
})
</script>
The YAML also calls on a css file called 'my_styles' (also in the same directory as the markdown file), which is used to get the video to play fullscreen. I guess you could include this in a css chunk directly in the markdown, but I wanted to keep it external. The file contains:
#my_video {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: 100%;
}
To get this to work, note that when I reference a video in the markdown I include id="my_video".
This works for me when the presentation is in fullscreen in Firefox.
I couldn't get a fully working solution in limited time, but you can use this is a start.
There are multiple issues already about this, both in remark and xaringan:
- https://github.com/yihui/xaringan/issues/218
- https://github.com/gnab/remark/issues/322
afterInit.html should start <script type='text/javascript'> and end with </script> if I understand correctly.
---
title: "Presentation Ninja"
subtitle: "⚔<br/>with xaringan"
author: "Yihui Xie"
institute: "RStudio, Inc."
date: "2016/12/12 (updated: `r Sys.Date()`)"
output:
xaringan::moon_reader:
includes:
after_body: "afterInit.html"
lib_dir: libs
nature:
highlightStyle: github
highlightLines: true
countIncrementalSlides: false
---
background-image: url(https://upload.wikimedia.org/wikipedia/commons/b/be/Sharingan_triple.svg)
```{r setup, include=FALSE}
options(htmltools.dir.version = FALSE)
```
---
<iframe width="560" height="315" src="https://www.youtube.com/embed/MWnZ8SoMeHc" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
I've a got a problem when I'd like to embed a YouTube video on my expo application, when I click on the play button, I sometimes get this message :
For example, when I posted this video on reddit, it played perfectly through their youtube embedded player.
I use this sample of code:
<WebView
useWebKit={true}
ref={(ref) => { this.videoPlayer = ref;}}
source={{uri: 'https://www.youtube.com/embed/bo_efYhYU2A?rel=0&autoplay=0&showinfo=0&controls=0'}}
scrollEnabled={false}
domStorageEnabled={true}
javaScriptEnabled={true}
/>
I know for a fact that the video is allowed to be embedded because when it's not the case, I get a different error message which allows me to open the video on youtube :
Here is a link to test it : https://snack.expo.io/#maxgfr/youtube-embedded
Any help would be greatly appreciated
Maxime
Edit : example of url which doesn't work https://www.youtube.com/embed/8GaWM2a3FAc
To solve this problem :
I create a web application which loads a youtube video thanks to the video ID. My endpoint is something like that : https://mywebsite.com/ID_VIDEO_YOUTUBE
Then in my react native application, I just have to load the URL of my website :
<WebView
useWebKit={true}
ref={(ref) => { this.videoPlayer = ref;}}
source={{uri: 'https://mywebsite.com/ID_VIDEO_YOUTUBE'}}
scrollEnabled={false}
domStorageEnabled={true}
javaScriptEnabled={true}
/>
Edit : Here is the sample of code that I use in my Vue JS application
<template>
<div style="position: fixed;overflow-y: hidden;overflow-x: hidden;width:100%;height:100%;">
<iframe style="width:100%;height:100%;" :src="'https://www.youtube.com/embed/'+this.$route.params.id+'?&autoplay=1&playsinline=1'" autoplay="1" playsinline="1" frameborder="0" scrolling="no" allow="playsinline; accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</template>
<script>
export default {
name: 'youtube',
head: {
link: [{
r: 'icon',
h: '/static/favicon.png',
t: 'image/png'
}]
}
}
</script>
I'm looking to embed a YouTube video into an XPage, probably into a repeat control. I've looked around but can't find anything specific to XPages. I can create a link to open the YouTube video but that just moves them to YouTube but I don't want to leave my site.
Does someone have an example of how to do this.
Use the HTML <iframe>, <object> or <embed> tag to insert YouTube videos into your XPage repeat control.
Example:
<xp:repeat
id="repeat1"
rows="30"
var="video"
indexVar="number">
<xp:this.value><![CDATA[#{javascript:
[ "http://www.youtube.com/embed/XMoTb1iep48",
"http://www.youtube.com/embed/lvs3vpmEKHg",
"http://www.youtube.com/embed/63lYaeOJZOA",
"http://www.youtube.com/embed/6D6PzLSlEsQ"
]
}]]></xp:this.value>
<iframe
width="400"
height="250"
style="margin:2em"
src="#{video}"
frameborder="0"
allowfullscreen="allowfullscreen">
</iframe>
<xp:text
rendered="#{javascript:(number + 1) % 2 == 0}">
<br />
</xp:text>
</xp:repeat>
Make sure you use http://www.youtube.com/embed/YOUR_VIDEO_ID as URL.
A detailed description you can find here.
You need to follow instructions and put a short snippet anywhere in the XPage. Something like:
<iframe title="YouTube video player" class="youtube-player" type="text/html"
width="640" height="390" src="http://www.youtube.com/embed/-X2zNe3YFNM"
frameborder="0" allowFullScreen></iframe>
With too many rows in your repeat you can expect lots of iframe reloads on every refresh.
I've got a youtube video that renders ok using object embed, in all browsers except ipad, here's the code:
<object id="ytViewer" width="468" height="327" type="application/x-shockwave-flash" data="http://www.youtube.com/apiplayer?version=3&enablejsapi=1&version=3&playerapiid=ytViewer" state="0" mute="0">
<param name="allowScriptAccess" value="always">
<param name="autoplay" value="0">
<param name="WMode" value="Opaque">
</object>
I'm using object embed, as I've made some custom player controls in javascript, which don't work when I use an iframe to embed the video.
It uses some javascript to pull the video in, but is it because ipad does'nt support flash embed?
Update:
function loadPlayer( divToLoad, plId, vidid) {
var params = {
allowScriptAccess: "always",
autoplay: 0
};
var atts = {
id: plId
};
// All of the magic handled by SWFObject (http://code.google.com/p/swfobject/)
swfobject.embedSWF("http://www.youtube.com/apiplayer?" + "&enablejsapi=1&version=3&playerapiid=" + plId, divToLoad, "468", "327", "9", null, null, params, atts);
swfobject.createCSS("#" + plId, "display:block");
$('#' + plId + '_container').attr('videoid', vidid);
}
So I need to get the function above to add the embed tag, not sure how to do that.
Thanks
Your code only links to the YT flash video player (not even pointing to a video).
Why not just use the automatically generated "share" code of YouTube?
Look out for the "embed" button in the "share" section right below your video and copy the default code. You can even activate some additional options:
<iframe width="560" height="315" src="http://www.youtube.com/embed/KVHO-FWuMXs" frameborder="0" allowfullscreen></iframe>
This should work for all browsers.
Edit:
if you need the object/param syntax, you can switch to the "old" way of embedding videos: the (currently fourth) option can be ticked to use this deprecated code:
<object width="560" height="315"><param name="movie" value="http://www.youtube.com/v/KVHO-FWuMXs?version=3&hl=de_DE"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/KVHO-FWuMXs?version=3&hl=de_DE" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object>
Test it with this music video from Psy:
http://www.youtube.com/watch?v=KVHO-FWuMXs
I am using a Twitter Bootstrap Modal and Youtube Video on the same page. I am facing Z-Index Problem where the Video is being displayed above the modal window in Chrome Browser.
How can i solve this issue ?
http://mink7.com/projects/cmrc/home.html
You should use YouTube urls with ?wmode=transparent param.
<iframe src="http://www.youtube.com/embed/EBSnWlpTPSk?wmode=transparent"></iframe>
If you include your object/embed tag then you should add <param name="wmode" value="opaque" /> for object tags, wmode=transparent for embed tags.
The YouTube video you put on your page is flash-based. Flash objects are rendered separately on the top of the window, because they're not the part of HTML5 stack. Z-index has no effect on these.
See e.g. http://www.google.com/search?q=flash+z-index
As suggested by Fatih, solution is to pass wmode=transparent. For the IFrame API, I used following:
var player = new YT.Player(pContainer, {
height: 300,
width: 400,
videoId: contentID,
playerVars : {wmode: "transparent"},
events: {
...
}
}
});
you can easily fix this.
USE:
<param name="wmode" value="opaque" />
inside object tag.
<object title="YouTube video player" width="480" height="390"
data="http://www.youtube.com/embed/EBSnWlpTPSk"
frameborder="0" wmode="Opaque">
<param name="wmode" value="opaque" />
</object>
OBJECT method is now deprecated:
https://developers.google.com/youtube/player_parameters