<?php
/* Found on this lovely site here: https://oembed.com/ */
$video = array();
/**
* YouTube Thumbnail
*
* read more: https://developers.google.com/youtube/iframe_api_reference
*/
$video['id'] = 'DeUnuGfyv0Y';
$xml = simplexml_load_file('https://www.youtube.com/oembed?url=http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3D' . $video['id'] . '&format=xml');
$video['thumbnail'] = $xml->thumbnail_url;
/**
* Vimeo Thumbnail
*
* read more: https://developer.vimeo.com/api/reference
*/
$video['id'] = '316874134';
$xml = simplexml_load_file('https://vimeo.com/api/oembed.xml?url=http%3A%2F%2Fvimeo.com%2F' . $video['id']);
$video['thumbnail'] = $xml->thumbnail_url;
/**
* YouTube Player
*/
$video = '
<iframe
id="ytplayer"
type="text/html"
width="1920"
height="1080"
src="https://www.youtube-nocookie.com/embed/' . $video['id'] . '?rel=0&autoplay=true&showinfo=0&color=white&theme=light&autoplay=false"
frameborder="0"
allowfullscreen></iframe>
';
/**
* Vimeo Player
*/
$video = '
<iframe
src="https://player.vimeo.com/video/' . $video['id'] . '?portrait=0&autoplay=true&title=0&byline=0&badge=0"
width="1920"
height="1080"
frameborder="0"
webkitallowfullscreen
mozallowfullscreen
allowfullscreen></iframe>
';
?>
Putting it all together:
<!-- YouTube -->
<div class="bm-video bm-video--youtube">
<a
class="bm-video__link"
href="https://www.youtube.com/watch?v=<?php echo $video['id']; ?>"
data-id="<?php echo $video['id']; ?>"
target="_blank"
rel="noopener">
<div class="bm-video__overlay">
<div class="bm-video__btn"></div>
</div>
<img
class="bm-video__thumbnail"
src="<?php echo $video['thumbnail']; ?>" />
</a>
</div>
<!-- Vimeo -->
<div class="bm-video bm-video--vimeo">
<a
class="bm-video__link"
href="https://vimeo.com/<?php echo $video['id']; ?>"
data-id="<?php echo $video['id']; ?>"
target="_blank"
rel="noopener">
<div class="bm-video__overlay">
<div class="bm-video__btn"></div>
</div>
<img
class="bm-video__thumbnail"
src="<?php echo $video['thumbnail']; ?>" />
</a>
</div>
And here is the JS to change the Thumbnail to the iframe Player:
<script>
jQuery(document).ready(function($) {
var $videos = $(".bm-video");
$videos.each(function() {
var id = $(".bm-video__link", $(this)).data("id");
$(this).on("click", function(e) {
e.preventDefault();
if ($(this).hasClass("bm-video--youtube")) {
$(this).html(
'<iframe class="bm-video__iframe" type="text/html" width="1920" height="1080" src="https://www.youtube-nocookie.com/embed/' + id + '?rel=0&autoplay=1&modestbranding=1&showinfo=0&iv_load_policy=3&theme=light" frameborder="0" allowfullscreen></iframe>'
);
}
if ($(this).hasClass("bm-video--vimeo")) {
$(this).html(
'<iframe src="https://player.vimeo.com/video/' + id + '?portrait=0&autoplay=true&title=0&byline=0&badge=0" width="1920" height="1080" frameborder="0" allow="autoplay; fullscreen" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>'
);
}
});
});
});
</script>
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.