How to Create a Live TV Website in Blogger / Blogger & WordPress?
Hello friends! Welcome to your Droidnur123 blog. So in this article today we are going to talk about creating a Live TV Website in Blogger / Blogspot & WordPress. And in this tutorial, we will know about How to Create a Live TV Website in Blogger / Blogger & WordPress? | droidnur123. So we will know all these things in this article. So stay in this article and know more in full detail.
A lot of visitors have asked me how we can make LIVE TV Channels Website in our Blogger Blog or Blogspot Blog? In such a situation, there are many videos on YouTube and a lot of articles on the Internet. In which it has been said but by embed everything from Youtube.
What are live tv channels?
As you know nowadays it is the era of DD Free Dish. And also, people nowadays have a lot of TV Channels Providers like Dish TV, Tata Sky. Which makes us available Channels Free and Paid to watch Live TV Channels.
If we see those things on Live TV Channels then it is happening immediately. As we know that when a cricket match is played, we watch cricket live on our TV or mobile. So the channels where we get to watch live tv. We know it as Live TV Channels.
Create a Live TV Website in Blogger!
Now it comes to How to Create a Live TV Website in Blogger / Blogger and what we have to do for this. By the way, you will also know that we can easily create a website using the Embed Code of any Live Youtube channel. But today I have told the steps below. No Youtuber or Blogger has told this to date.
So all you have to do is follow the steps given below. And by using the script, you can easily create on Blogger live tv website.
Step 1
First of all, you have to log in to Blogger Dashboard. Now you have to go to the section containing the page and click on the new page.
Step 2
Now you have to copy the script given below and go to your new page in HTML and paste this script. Also, you have to click on Publish Button. Your Live TV website is ready.
<style>
@media screen and (min-width: 200px) and (max-width: 567px) and (orientation: landscape) {
html {
transform: rotate (-90deg);
transform-origin: left top;
width: 100vh;
overflow-x: hidden;
position: absolute;
}
}
@media screen and (min-width: 200px) and (max-width: 767px) {
.sticky {
top: 0px;
-webkit-box-shadow: 0 0 20px 0 rgba (0, 0, 0, 0.9);
-moz-box-shadow: 0 0 20px 0 rgba (0, 0, 0, 0.9);
box-shadow: 0 0 20px 0 rgba (0, 0, 0, 0.9);
right: 0px;
position: fixed;
width: 50%;
z-index: 1;
background-color: black;
border: 1px solid white;
text-align: center;
padding-right: 24.5%;
padding-left: 24.5%;
}}
@media screen and (min-width: 768px) and (max-width: 1300px) {
.sticky {
top: 0px;
-webkit-box-shadow: 0 0 20px 0 rgba (0, 0, 0, 0.9);
-moz-box-shadow: 0 0 20px 0 rgba (0, 0, 0, 0.9);
box-shadow: 0 0 20px 0 rgba (0, 0, 0, 0.9);
position: fixed;
top: 80%;
right: 10px;
width: 20%;
z-index: 1;
background-color: black;
border: 1px solid white;
text-align: center;
padding-right: 0%;
padding-left: 0%;
}}
</style>
<hr />
<div class = "" id = "myHeader">
<div id = "http">
<script src = "// content.jwplatform.com/libraries/IDzF9Zmk.js"> </script>
<div id = "player">
</div>
<script type = "text / javascript">
jwplayer ("player"). resize (480, 270);
jwplayer ('player'). setup ({
file: 'https://m-c036-j2apps.s.llnwi.net/hls/0098.DDNational.in.m3u8',
playbackRateControls: [0.75, 1, 1.25, 1.5],
title: 'live tv',
width: '100%',
aspectratio: '16: 9',
mute: false,
repeat: 'true',
autostart: true,
primary: 'html5',
type: 'm3u8',
setFullscreen: true,
controls: true,
showCode: true,
responsive: true,
skin: {
name: "glow",
active: "red",
inactive: "",
background: ""
}
});
</script>
</div>
</div>
<script>
window.onscroll = function () {myFunction ()};
var header = document.getElementById ("myHeader");
var sticky = header.offsetTop;
function myFunction () {
if (window.pageYOffset> = sticky) {
header.classList.add ("sticky");
} else {
header.classList.remove ("sticky");
}
}
</script>