<?php 

$strTitle = "Videoteca semanal en Altares";
$strUrl   = "http://altares.mviglobal.org/videoteca/";
$strUrlTransmision = "http://altares.mviglobal.org/comparte/";
$strUrlImg= "http://altares.mviglobal.org/media/images/iconos/lluvia.jpg";
$strUrlFb_3 = "https://www.facebook.com/MVIQUERETARO/videos/957825274749882";
$strUrlYt_3 = "https://www.youtube.com/watch?v=74yHpRXnenM";
$strContent="Semana 1 del 4 Enero 2021 al 9 de Enero 2021";

$strTypeImage = "image/jpeg";
$strWidthImg  = "300";
$strHeightImg = "300";
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
<title>MVI - Videoteca Altares</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta property="og:title" content="<?= $strTitle ?>" />
<meta property="og:type" content="website" />
<meta property="og:url" content="<?= $strUrl ?>" />
<meta property="og:image" content="<?= $strUrlImg?>" />
<meta property="og:image:type" content="<?= $strTypeImage?>" />
<meta property="og:image:width" content="<?= $strWidthImg?>" />
<meta property="og:image:height" content="<?= $strHeightImg?>" />
<meta property="og:description" 
  content="<?= $strContent ?>" />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  <script src="https://kit.fontawesome.com/1e4203a92c.js" crossorigin="anonymous"></script>
  <style>
      .btnFb {
        background-color: #008CBA;
        color: white;
    }
    .btnYt {
        background-color: red;
        color: white;
    }
  </style>
</head>
<body>
 
<div class="card-group">
  <div id="card-1" class="card">
    <img src="../media/images/portada/Portada_04012021.png" class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Recap Altares del 28 Dic 2020 al 2 Ene 2021</h5>
      <p class="card-text"><button type="button" class="btn btn-success btn-sm btn-transmision_1">Ver transmisión</button></p>
      <p class="card-text"><small class="text-muted">Enero 4, 2021</small></p>
    </div>
  </div>
  <div id="card-2" class="card">
    <img src="../media/images/portada/Portada_05012021.png" class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">UN A&Ntilde;O PARA CONFIAR EN EL SEÑOR</h5>
      <p class="card-text"><button type="button" class="btn btn-outline-success btn-sm btn-transmision_2">Ver transmisión</button></p>
      <p class="card-text"><small class="text-muted">Enero 5, 2021</small></p>
    </div>
  </div>
  <div id="card-3" class="card">
    <img src="../media/images/portada/Portada_06012021.jpg" class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Tiempo de florecer</h5>
      <p class="card-text">
        <button type="button" class="btn btnFb btn-sm"><i class="fab fa-facebook"></i> Ver en Facebook</button>
        <button type="button" class="btn btnYt btn-sm"><i class="fab fa-youtube"></i> Ver en YouTube</button></p>
      <p class="card-text"><small class="text-muted">Enero 6, 2021</small></p>
    </div>
  </div>
</div>
<script>
        $('.btnFb').click(function() {
           window.location = "<?= $strUrlFb_3 ?>"; 
        });
        
        $('.btnYt').click(function() {
           window.location = "<?= $strUrlYt_3 ?>"; 
        });
        
        $('.btn-transmision_1, .btn-transmision_2').click(function() {
           window.location = "<?= $strUrlTransmision ?>"; 
        });
    </script>
</body>
</html>
