How to turn a video into a floating window in WordPress and Blogger ?
 In this article we are going to see how to easily turn a video into a floating window in WordPress and Blogger. This will be embedded in the lower corner of the screen when the user scrolls through the page. He can then continue reading or browse a page of your website while continuing to watch the video. |
This feature will not be automatic for all videos. You will be able to activate it or not for a specific video. In addition, the latter will be fully responsive and will adapt to all screens (smartphone, tablet).e
We will add two codes in your WordPress or Blogger theme: a JavaScript code (JQuery) and a CSS code.
To facilitate the integration of the codes in the files of your WordPress theme, we will use a plugin that allows you to incorporate JavaScript and CSS codes without having to modify the files in the theme editor. That said, you are free to insert them directly without a plugin if you have the necessary technical knowledge.
The plugin we will use in this tutorial is called "Insert Headers and Footers".
Note: You can choose any plugin that allows you to insert JavaScript and CSS codes into WordPress theme files.
The first part will be devoted to the installation of the floating video in Wordpress then in the second in the Blogger platform and in the last part of this tutorial, we will discuss the activation method which is common to both platforms.
Prerequisites before installing the Floating Video Functionality
Check that the jQuery library is properly installed in your theme.
The first step is to make sure that the jQuery library is enabled in your theme.
In WordPress
View the source code of your website in a web browser, then search for "jquery" in your search bar.
Regardless of the version, your jQuery code will look like this:
<script type = 'text / javascript' src = 'https: //votre-site-web.com /wp-includes/js/jquery/jquery.js?ver=1.12.4-wp'> </script> < script type = 'text / javascript' src = 'https: //votre-site-web.com /wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.1'> </script>In Blogger
To verify that the jQuery library is properly installed in your Blogger theme, you will need to access the HTML code.
Reminder : Before starting any modification of the HTML code of your theme, I strongly advise you to save a copy of your theme.
Step 1. Click on "Theme"> "Edit HTML code"
Step 2. A box containing the HTML code of your theme will be displayed.
Step 3. Click anywhere inside the HTML code
Step 4. Then press Ctrl+F at the same time or Cmd+F for Mac, a small search bar should appear at the top left in Blogger's new interface.
Step 5. In the search bar, type jquery.js or jquery.min.js
You will probably find code that looks like this:
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> </script><script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> </script>You can try a more recent version if you wish, namely version 3.1.1 or 3.5.1 whose code is as follows:
JQuery version 3.1.1
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"> </script>JQuery version 3.5.1
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>Note: Your theme must contain only one version of the jQuery library to avoid any malfunction or conflicts between the different versions.
Add a video in a floating window in WordPress
Start by installing and activating the "Insert Headers and Footers" plugin.
Then access the plugin in the menu "Settings"> "Insert Headers and Footers"
Add CSS Properties
Insert the CSS code below in the first "Scripts in header" box.
<style type = 'text / css'> .iframevid {position: absolute; left: 0; right: 0; top: 0; bottom: 0; float: left; overflow: hidden; margin-right: 12px; animation: littleShine .85s linear infinite; background: # f5f5f5 linear-gradient (to right, rgba (255,255,255,0) 5%, rgba (255,255,255, .75) 20%, rgba (255,255,255,0) 30%); background-size: 800px 100px} .containervid {text-align: center} .floatvid iframe {max-width: 100%; max-height: 100%} .floatvid.fly {padding: 0; position: fixed; bottom: 20px; right: 20px; box-shadow: 0 8px 10px -5px rgba (0,0,0,0.15); - webkit-transform: translateY (100%); transform: translateY (100%); width: 260px; height: 145px; -webkit- animation: fade-in-up .25s ease forwards; animation: fade-in-up .25s ease forwards; z-index: 99} .youtubevid {text-align: center; margin: auto; width: 100%} .responsivevid {position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden} .responsivevid iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0} @media screen and (max-width: 640px) {.floatvid.fly {bottom: 10px; right: 10px; width: 160px ; height: 85px} .responsivevid {padding-bottom: 54%}} @keyframes fade-in-up {0% {opacity: 0} 100% {- webkit-transform: translateY (0); transform: translateY (0) ; opacity: 1}} @keyframes littleShine {0% {background-position: -400px 0} 100% {background-position: 400px 0}} </style>Insert JavaScript Code
Add the following code in the "Scripts at the bottom of the page" box
<script type = 'text / javascript'> jQuery (document) .ready (function ($) {var $ window = $ (window), $ floatvideoWrap = $ (". containervid"), $ floatvid = $ (". floatvid "), floatvideoHeight = $ floatvid.outerHeight (); $ window.on (" scroll ", function () {$ window.scrollTop ()> floatvideoHeight + $ floatvideoWrap.offset (). top? ($ floatvideoWrap.height (floatvideoHeight) , $ floatvid.addClass ("fly")): ($ floatvideoWrap.height ("auto"), $ floatvid.removeClass ("fly"))}), setTimeout (function () {$ (". youtubevid-frame" ) .each (function () {$ (this) .replaceWith ('<iframe class = "youtubevid-frame iframevid" src = "' + $ (this) .data (" src ") + '" allowfullscreen = "allowfullscreen" height = "281" width = "500"> </iframe> ')})}, 5e3);}); </script>Finally, click on "Save
Add a video in a floating window in Blogger
Add CSS Code
Step 1. Click on "Theme"> "Edit HTML code"
Step 2. Look for the beacon </head>
Step 3. Insert the following CSS code just above the tag </head>
Step 2. Look for the beacon </head>
Step 3. Insert the following CSS code just above the tag </head>
<style type='text/css'>
.iframevid{position:absolute;left:0;right:0;top:0;bottom:0;float:left;overflow:hidden;margin-right:12px;animation:littleShine .85s linear infinite;background:#f5f5f5 linear-gradient(to right,rgba(255,255,255,0) 5%,rgba(255,255,255,.75) 20%,rgba(255,255,255,0) 30%);background-size:800px 100px}
.containervid{text-align:center}
.floatvid iframe{max-width:100%;max-height:100%}
.floatvid.fly{padding:0;position:fixed;bottom:20px;right:20px;box-shadow:0 8px 10px -5px rgba(0,0,0,0.15);-webkit-transform:translateY(100%);transform:translateY(100%);width:260px;height:145px;-webkit-animation:fade-in-up .25s ease forwards;animation:fade-in-up .25s ease forwards;z-index:99}
.youtubevid{text-align:center;margin:auto;width:100%}
.responsivevid{position:relative;padding-bottom:56.25%;height:0;overflow:hidden}
.responsivevid iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}
@media screen and (max-width:640px) {
.floatvid.fly{bottom:10px;right:10px;width:160px;height:85px}
.responsivevid{padding-bottom:54%}
}
@keyframes fade-in-up {
0%{opacity:0}
100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}
}
@keyframes littleShine {
0%{background-position:-400px 0}
100%{background-position:400px 0}
}
</style>Insert JavaScript Code
- Look for the tag </body> in the HTML code of your theme
- Add the following code above the tag </body>.
<script type='text/javascript'>
//<![CDATA[
var $window=$(window),$floatvideoWrap=$(".containervid"),$floatvid=$(".floatvid"),floatvideoHeight=$floatvid.outerHeight();$window.on("scroll",function(){$window.scrollTop()>floatvideoHeight+$floatvideoWrap.offset().top?($floatvideoWrap.height(floatvideoHeight),$floatvid.addClass("fly")):($floatvideoWrap.height("auto"),$floatvid.removeClass("fly"))}),setTimeout(function(){$(".youtubevid-frame").each(function(){$(this).replaceWith('<iframe class="youtubevid-frame iframevid" src="'+$(this).data("src")+'" allowfullscreen="allowfullscreen" height="281" width="500"></iframe>')})},5e3);
//]]>
</script>Enable the Floating video feature in WordPress and Blogger (Common Activation Method)
Turn a YouTube video into a floating window
Find the iframe embed code of a YouTube video
- Below your YouTube video, click on the "Share" menu
- Then click on the "Integrate" button
Your iframe code will look like this:
<iframe width="560" height="315" src="https://www.youtube.com/embed/ tOFjX6R2rEU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>Insert the iFrame link in the HTML code for activating the Floating Window
For videos hosted in YouTube, just insert your video's iframe code into the HTML code below. Then the latter must be added in an article or a WordPress page in the "Text" mode if you use the classic editor or in a "Custom HTML block" if you use the Gutenberg editor.
<div class="containervid">
<div class="floatvid">
<div class="youtubevid">
<div class="responsivevid">
<div class="youtubevid-frame iframevid" data-src="//www.youtube.com/embed/tOFjX6R2rEU"></div>
</div>
</div>
</div>
</div>Enable the feature for a video hosted on Google Drive
This process is very useful if you want to allow your visitors to view a video directly in your website without leaving it and at the same time speed up the display and save bandwidth.
Your video's iframe code in Google Drive will look like this:
<iframe src="https://drive.google.com/file/d/1TujYp5npvm7UwCjH2-bYBVwjbTsTPSQI/preview" width="640" height="480"></iframe><div class="containervid">
<div class="floatvid">
<div class="youtubevid">
<div class="responsivevid">
<div class="youtubevid-frame iframevid" data-src='//drive.google.com/file/d/1TujYp5npvm7UwCjH2-bYBVwjbTsTPSQI/preview '></div>
</div>
</div>
</div>
</div>Enable the feature for a video hosted in platforms like Vimeo, Dailymotion, etc.
Get the iframe code that is usually found in the "Share" menu and insert it into the following HTML code:
<div class="containervid">
<div class="floatvid">
<iframe src="https://player.vimeo.com/video/27129110" width="640" height="360" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
</div>
</div>Replace this code <iframe src = "https://player.vimeo.com/video/27129110" width = "640" height = "360" frameborder = "0" allow = "autoplay; fullscreen" allowfullscreen> </iframe> with the iframe code of your video.
So ! You can now easily transform a YouTube, Dailymotion, Vimeo video to name a few, into a floating window in WordPress and Blogger.
Thank you for taking the time to read this tutorial. Do not hesitate to share it on social networks if you think it could be useful to other people.
° ° °
1 comment